Использование:
<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">
вместо
<div class="col-xs-1 center-block">
можно также использовать начальную загрузку 3 CSS:
<div class="col-xs-1 text-center">
Загрузитесь соглашения о присвоении имен несут собственные стили, col-XS-1 обращается к столбцу, являющемуся 8,33% содержания широкого элемента. Ваш текст, скорее всего, расширился бы далеко вне указанной ширины, и не мог возможный центрироваться в нем. Если бы Вы хотели, чтобы это ограничило отделению, то Вы могли бы использовать что-то как разрыв слова CSS.
Для центрирования содержания в элементе, достаточно большом для расширения вне текста, у Вас есть две опции.
Опция 1: Тег center HTML
<div class="row">
<div class="col-xs-1 center-block">
<center>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</center>
</div>
</div>
Опция 2: текст CSS - выравнивается
<div class="row">
<div class="col-xs-1 center-block" style="text-align:center;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
, Если Вы хотели, чтобы все ограничило к ширине ОБНОВЛЕНИЯ столбца
<div class="row">
<div class="col-xs-1 center-block" style="text-align:center;word-break:break-all;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
- Используя центральный текстом класс
<div class="row">
<div class="col-xs-1 center-block text-center">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Начальной загрузки Метод FlexBox
<div class="row">
<div class="flexBox" style="
display: flex;
flex-flow: row wrap;
justify-content: center;">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Используйте text-center
вместо center-block
.
Или использование center-block
на элементе промежутка (я сделал столбец шире, таким образом, Вы видите выравнивание лучше):
<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>
Никакая потребность усложнить вещи. С Начальной загрузкой 4, можно просто выровнять объекты горизонтально в столбце с помощью граничного автоматического класса my-auto
<div class="col-md-6 my-auto">
<h3>Lorem ipsum.</h3>
</div>
Загрузитесь 4, горизонтальный и вертикальный выравнивают содержание с помощью класса align-items-center начальной загрузки Использования поля
<div class="page-hero d-flex align-items-center justify-content-center">
<h1>Some text </h1>
</div>
гибкого провода и 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>
Я знаю, что этот вопрос стар. И вопрос не сделал упомянутый, какую версию Начальной загрузки он использовал. Таким образом, я предположу, что ответ на этот вопрос разрешен.
, Если какой-либо из Вас (как я) наткнулся на этот вопрос и поиск ответа с помощью текущего (2019) платформа начальной загрузки, то вот решение.
Использование d-flex justify-content-center
на Вашем отделении столбца. Это будет центрировать все в том столбце.
<div class="row">
<div class="col-4 d-flex justify-content-center">
// Image
</div>
</div>
, Если у Вас есть текст в столбце, и Вы хотите выровнять все это для центрирования. Просто добавьте text-center
к тому же классу.
<div class="row">
<div class="col-4 d-flex justify-content-center text-center">
// for image and text
</div>
</div>
//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>
col-lg-4 col-md-6 col-sm-8 седло 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