Quiero tener 3 imágenes en la primera línea y 2 en la segunda. Tengo este código pero tiene 2 en la parte superior y 3 en la parte inferior.
<ul>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
</ul>
* { box-sizing: border-box; }
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center; }
li { display: inline-block; padding: 10px;}
li:nth-child(1), li:nth-child(4) {
width: 50%;
}
li:nth-child(4) { text-align: right; }
li:nth-child(2) { text-align: left; }
Quiero que las dos imágenes inferiores se centren con las tres imágenes en la parte superior.
Resultado esperado: 3 imágenes en la primera fila y 2 en la segunda fila Resultado real: 2 imágenes en la primera fila y 3 en la segunda fila
3 respuestas
Use Flex:
#container{
width: 550px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#container > img{
margin: 10px;
}
<div id="container">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
<img src="https://via.placeholder.com/150">
</div>
Así:
Simplemente ajuste los anchos y use el nth-child
apropiado
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
ul {
list-style: none;
font-size: 0;
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
text-align: center;
width: 33.3%;
border: 1px solid red;
}
li:nth-child(4),
li:nth-child(5) {
width: 50%;
}
<ul>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
<li><img src="http://www.fillmurray.com/140/100" /></li>
</ul>
También podría hacer algo como esto, que es una herramienta CSS increíble. Usa la cuadrícula CSS.
//HTML
<ul class="grid">
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
<li><img src="./icons/User_Management.png" /></li>
</ul>
//CSS
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].