Ejercicio diferencia entre centrado de texto y de cajas en css

Ejercicio diferencia entre centrado de texto y de cajas en css

Print Friendly, PDF & Email
Ejercicio diferencia entre centrado de texto y de cajas en css
Valora esta entrada

En este ejercicio vamos a practicar el concepto de centrado de cajas y centrado de textos dentro de una caja.

Aprovecharemos también para repasar algunos conceptos relacionados con el modelo de cajas.

Las siguientes lecturas te pueden ser de interés.

¡Entremos en materia!

Enunciado

Dado un documento web con el siguiente código html

<div id="contenedor">
	<p class="primero">Soy el primer texto</p>
	<p class="segundo">Soy el segundo texto</p>
</div>

El contenedor debe cumplir que:

  • Tenga un ancho del 100% pero nunca superior a 600px.
  • Tena un relleno superior de 25px, 50px relleno derecho, 10px relleno inferior y 50px relleno izquierdo.
  • Tenga un borde de 1px de grueso.
  • El borde superior e inferior es dashed.
  • Los bordes laterales son dotted.
  • El borde superior es rojo, el  derecho rojo, el inferior verde y el izquierdo naranja.
  • Está centrado horizontalmente respecto del body.

Los párrafos deben cumplir que tienen:

  • Un ancho del 30% pero un ancho máximo de 300px.
  • Un relleno superior e inferior de 25px y un relleno derecho e izquierdo de 10px.
  • Un borde de 2px solido y rojo.

Completa la hoja html y css según consideres para conseguir el resultado de la imagen.

Solución del ejercicio

Para centrar el texto evitaremos el uso de la etiqueta deprecated <center>

En su defecto usaremos {text-align:center;} para centrar el contenido dentro de una caja.

Usaremos{margin:auto;}para centrar una caja respecto de su caja que la contiene.

<!DOCTYPE html>
<html>
<head>
	<title>Solución ejercicio centrado cajas y texto</title>
	<meta charset="utf-8"/>

	<style>
	#contenedor{
		width:100%;
		max-width:600px;
		padding:25px 50px 10px;
		border-width:1px;
		border-style:dashed dotted;
		border-color:blue red green orange;
		margin:0 auto;
	}

	p{
		width:30%;
		max-width:300px;
		padding:25px 10px;
		border:2px solid red;
	}

	.primero{margin:auto;}
	.segundo{text-align:center;}

	</style>

</head>
<body>

<div id="contenedor">
	<p class="primero">Soy el primer texto</p>
	<p class="segundo">Soy el segundo texto</p>
</div>

</body>
</html>

¡Hola!

Querido lector,

Este es un buen ejercicio para diferenciar el centrado de texto con css del centrado de cajas.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Ejemplo de menú vertical con submenú desplegable vertical (CSS)
- 593
Serie de ejercicios de creación de menús con submenús desplegables mediante CSS. Incluye código y descargable.
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 465
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
LibrosWeb ahora es UniWebSidad
- 307
LibrosWeb, una de las mejores referencias en Internet para aprender web, se ha reciclado tras 12 años de existencia. ¡Mi enhorabuena!
Escribe los selectores css adecuados en cada caso
- 43
Ejercicio css del curso web ifcd0110 para practicar con los selectores más adecuados a poner en un fragmento de html. Incluye solución.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 120
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Creación de una página web en mantenimiento con html y css
- 37
Creación de una landing page de página en mantenimiento con html y css. Incluye solución.
¡Veo, veo! Suplantando etiquetas html con css. Ejercicio de repaso.
- 43
Ejercicio de repaso de instrucciones básicas de css. Estiliza etiquetas para que parezcan etiquetas que en realidad no son. Incluye solución.
Ejercicio css sobre la propiedad box-shadow (css3)
- 36
Ejercicio para practicar con la propiedad box-shadow de css. Incluye solución.
Ejercicio nivel básico sobre selectores CSS
- 42
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
Mi chuleta de instrucciones css útiles para estilizar table de html
- 16
Comparto mi chuleta de instrucciones css útiles para estilizar table de html. Vemos un ejemplo de aplicación.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.