<html>
<head>
<style>
.box {
display: flex;
align-items: center;
justify-content: center;
width:400px;
height:300px;
border:1px solid #000;
}
.box img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">
<img src="tu-imagen.png"/>
</div>
</body>
</html>
ccc
Mostrando entradas con la etiqueta CSS: Centrar. Mostrar todas las entradas
Mostrando entradas con la etiqueta CSS: Centrar. Mostrar todas las entradas
CSS: Centrar verticalmente con flex
CSS: Centrar tanto imágenes como texto
<style>
.container {
border: 1px solid #333;
height: 250px;
width: 250px;
}
.center {
display: table;
height: 100%;
width: 100%;
}
.center > span {
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
<div class="container">
<div class="center"><span><img src="https://www.midominio.com/logo.png"></span></div>
</div>
El método más eficaz es:
<div style="display:flex;align-items:center;">
<img src="https://www.midominio.com/images/pepe.jpg"><span>En un lugar de la Mancha de cuyo nombre no quiero acordarme</span>
</div>
CSS: Centrar un div dentro de otro div
<div id="divPadre">
<div id="divHijo">hola</div>
</div>
<style>
#divPadre {
height:100px;
width:800px;
text-align:center;
}
#divHijo {
height:50px;
width:400px;
margin:0px auto;
}
</style>
CSS: Centrar
Centrar una imagen:
Para centrar todo tanto horizontal como verticalmente:
div#wrapperNews div#inner-wrapper p img {
display:block;
margin-left: auto;
margin-right: auto;
}
Para centrar todo tanto horizontal como verticalmente:
<style>
.padre {
float:left;
border:1px solid #000;
width:200px;
height:200px;
align-items: center; // centra verticalmente lo q contenga
display: flex;
}
.hijo {
width:100%;
text-align:center;
}
</style>
<div class="padre">
<span class="hijo">Uno</span>
</div>
<div class="padre">
<span class="hijo">Dos</div>
</div>
<div class="padre">
<span class="hijo"><img src="images/foto1.jpg"></span>
</div>
Suscribirse a:
Entradas (Atom)