vertical - centrar texto horizontalmente css
Twitter Bootstrap-cómo centrar los elementos horizontal o verticalmente (9)
Con bootstrap 4 puedes usar flex
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
fuente: bootstrap 4.1
¿Hay alguna forma de centrar los elementos html vertical u horizontalmente dentro de los padres principales?
De la documentación de Bootstrap :
Establecer un elemento para
display: blocky centro a través delmargin. Disponible como mixin y clase.
<div class="center-block">...</div>
Me gusta esta solución de una pregunta similar. https://.com/a/25036303/2364401 Use la clase de text-center bootstraps en los datos de tabla real <td> y el encabezado de tabla <th> . Asi que
<td class="text-center">Cell data</td>
y
<th class="text-center">Header cell data</th>
Para futuros visitantes a esta pregunta:
Si está intentando centrar una imagen en un div pero la imagen no se centra, esto podría describir su problema:
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
La clase img-responsive agrega una display:block instrucciones a la etiqueta de imagen, que impide que text-align:center (clase de text-center text-align:center deje de funcionar.
SOLUCIÓN:
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
La adición de la clase de center-block anula la display:block instrucciones de display:block puestas usando la clase img-responsive .
Sin la clase img-responsive , la imagen se centraría simplemente agregando text-center clase de text-center
Puedes escribir directamente en tu archivo css así:
.content {
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
<div class = "content" >
<p> some text </p>
</div>
para el centrado horizontal puedes tener algo como esto:
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
yo uso esto
<style>
html, body {
height: 100%;
margin: 0;
padding: 0 0;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.centering {
float: none;
margin: 0 auto;
}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
Actualizado 2018
En Bootstrap 4 , los métodos de centrado han cambiado.
Centro horizontal en BS4
-
text-centertodavía se utiliza para ladisplay:inlineelementos endisplay:inline -
mx-autoreemplazacenter-blockcentral al centro de ladisplay:flexniños -
offset-*omx-autose puede usar para centrar las columnas de la cuadrícula
mx-auto (los márgenes del eje x automáticos) centrarán la display:block o display:flex elementos display:flex que tienen un ancho definido , ( % , vw , px , etc.). Flexbox se utiliza de forma predeterminada en las columnas de la cuadrícula, por lo que también hay varios métodos de centrado de flexbox.
Demo Bootstrap 4 Centrado horizontal
Para el centrado vertical en BS4, consulte https://.com/a/41464397/171456
Actualización : si bien esta respuesta probablemente fue correcta a principios de 2013, ya no debe usarse. La solución adecuada utiliza compensaciones .
En cuanto a la sugerencia de otros usuarios, también hay clases de bootstrap nativas disponibles como:
class="text-center"
class="pagination-centered"
Gracias a @Henning y @trejder.