css dl-dt-dl centra el texto debajo de la imagen
Uno de los métodos es el siguiente:
La imagen y el código del archivo descripción de la imagen.html son los siguientes:
< li>
< /html>
El código del archivo img.css es el siguiente: body?{
background:?#fff;
margin:?0?auto;
}
dl?{
margen:?0?24px;
relleno:?10px;
ancho: ?920px;?/* ?Esta es la línea clave que controla el ancho total de la lista?*/
}
dl?li?{
list-style-type:?none;?/*?¿Eliminar el punto antes de la lista?*/
display:?inline;/ * ?Esta es la línea clave, lo que hace que la lista se vuelva en línea?*/
float:?left;/*?Esta es la línea clave, lo que hace que todos los elementos de la lista en línea floten a la izquierda?*/
}
dl?li?p?.img?{
width:?200px;?/*?Esta es la línea clave que controla el ancho de la imagen. */
height:?200px;
display:?block;/*?¿Esta es la línea clave que convierte la imagen en línea en un modelo de caja a nivel de bloque?*/
margin-bottom:?5px;/*?¿Agregar un margen inferior de 5px a la imagen del modelo de caja a nivel de bloque?*/
}
dl?li ?p?{
text-align:?center;/*?¿Esta es la línea clave para controlar el centrado del texto?*/
}
dl?li?p.marginright?{
margin-right:?40px;/*?Esta es la línea clave que controla el ancho del margen derecho del 1?2?3?5?6? 7 image?*/
text- align:?center;
} La dificultad en su problema es agregar las etiquetas apropiadas
aEn CSS, hay tres problemas principales a resolver.
1. Controle el ancho total de la lista
1.1
1.3 Cada imagen 5 6 7 8 tiene 200 px de ancho (200 px de alto), incluidas las imágenes 5 6 7
Cada margen exterior derecho es de 40 px, la segunda fila tiene un ancho total de 920 px, < The El ancho total de dl/> es 920 px, que es la segunda fila.2. Utilice display:inline; para que
3. Luego use display:block; para convertir el
que contiene "texto