01 Mar Ejercicio diferencia entre centrado de texto y de cajas en css
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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Ejercicio css dónde se calcula el width real de dos cajas con y sin box-sizing y el espacio real ocupado. Incluye solución.
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Para cada propiedad se muestra un ejemplo visual del efecto de un valor positivo o negativo de top, right, bottom y left.
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
El uso de tablas html no está muy bien visto si no es estrictamente para tabular contenidos. Pero también lo podemos hacer mediante display:table de css.
Observa de forma práctica la diferencia entre el uso de la propiedad display:none y visibility:hidden. Incluye solución.
No hay comentarios