html - horizontalmente - centrar div en bootstrap 3

¿Cómo centrar el contenido en una columna de arranque?

Question

Estoy tratando de centrar el contenido de la columna. No parece que funcione para mí. Aquí está mi HTML:

<div class="row">
<div class="col-xs-1 center-block">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>

JSFiddle Demo

Answer 1

Bootstrap 4, alinee el contenido horizontal y vertical usando la caja flexible

<div class="page-hero d-flex align-items-center justify-content-center">
<h1>Some text </h1>
</div>

Utilice la clase bootstrap align-items-center y justify-content-center

.page-hero {
height: 200px;
background-color: grey;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="page-hero d-flex align-items-center justify-content-center">
<h1>Some text </h1>
</div>

Answer 2

Las convenciones de nomenclatura de Bootstrap tienen sus propios estilos, col-XS-1 se refiere a una columna que tiene un 8.33% del ancho del elemento contenedor. Su texto, probablemente se expandiría mucho más allá del ancho especificado, y no podría centrarse en él. Si quisieras restringir al div, podrías usar algo como css word-break.

Para centrar el contenido dentro de un elemento lo suficientemente grande como para expandirse más allá del texto, tiene dos opciones.

Opción 1: etiqueta de centro HTML

<div class="row">
<div class="col-xs-1 center-block">
<center>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</center>
</div>
</div>

Opción 2: alineación de texto CSS

<div class="row">
<div class="col-xs-1 center-block" style="text-align:center;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>

Si desea que todo se limite al ancho de la columna

<div class="row">
<div class="col-xs-1 center-block" style="text-align:center;word-break:break-all;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>

ACTUALIZACIÓN: uso de la clase de centro de texto de Bootstrap

<div class="row">
<div class="col-xs-1 center-block text-center">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>

Método FlexBox

<div class="row">
<div class="flexBox" style="
display: flex;
flex-flow: row wrap;
justify-content: center;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>

http://jsfiddle.net/usth0kd2/13/

Answer 3

No hay necesidad de complicar las cosas. Con Bootstrap 4, simplemente puede alinear elementos horizontalmente dentro de una columna utilizando la clase de margen automático my-auto

 <div class="col-md-6 my-auto">
<h3>Lorem ipsum.</h3>
</div>

Answer 4

Sé que esta pregunta es vieja. Y la pregunta no mencionaba qué versión de Bootstrap estaba usando. Asumiré que la respuesta a esta pregunta está resuelta.

Si alguno de ustedes (como yo) tropezó con esta pregunta y buscaba una respuesta usando el marco de arranque actual (2019), entonces esta es la solución.

Bootstrap 4

Use d-flex justify-content-center en su columna div. Esto centrará todo dentro de esa columna.

<div class="row">
<div class="col-4 d-flex justify-content-center">
// Image
</div>
</div>

Si tiene texto dentro de la columna y desea alinear todo eso al centro. Simplemente agregue text-center a la misma clase.

<div class="row">
<div class="col-4 d-flex justify-content-center text-center">
// for image and text
</div>
</div>

Answer 5

Use text-center lugar de center-block .

O use center-block en el elemento span (amplié la columna para que pueda ver mejor la alineación):

<div class="row">
<div class="col-xs-10" style="background-color:#123;">
<span class="center-block" style="width:100px; background-color:#ccc;">abc</span>
</div>
</div>

Answer 6

Utilizar:

<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">

en lugar de

<div class="col-xs-1 center-block">

También puede usar bootstrap 3 css:

<div class="col-xs-1 text-center">

Answer 7

col-lg-4 col-md-6 col-sm-8 col-11 mx-auto

 1. col-lg-4 ≥ 1200px (popular 1366, 1600, 1920+)
2. col-md-6 ≥ 970px (popular 1024, 1200)
3. col-sm-8 ≥ 768px (popular 800, 768)
4. col-11 set default smaller devices for gutter (popular 600,480,414,375,360,312)
5. mx-auto = always block center

Answer 8

//add this to your css
.myClass{
margin 0 auto;
}
// add the class to the span tag( could add it to the div and not using a span
// at all
<div class="row">
<div class="col-xs-1 center-block">
<span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>