Я пытаюсь центрировать содержимое столбца. Не похоже, что это работает для меня. Вот мой HTML:
<div class="row">
<div class="col-xs-1 center-block">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Я пытаюсь центрировать содержимое столбца. Не похоже, что это работает для меня. Вот мой HTML:
<div class="row">
<div class="col-xs-1 center-block">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
Использование:
<!-- 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">
Соглашения об именовании Bootstrap несут собственные стили, col-XS-1 относится к столбцу, составляющему 8,33% от содержащего элемента. Ваш текст, скорее всего, будет расширяться далеко за пределы указанной ширины и не может быть сосредоточен внутри него. Если вы хотите, чтобы он ограничивал div, вы могли бы использовать что-то вроде css word-break.
Для центрирования содержимого внутри элемента, достаточно большого для расширения за пределами текста, у вас есть два варианта.
Вариант 1: тег центра 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>
UPDATE - использование класса текстового центра Bootstrap
<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
для элемента span (я сделал столбец шире, чтобы вы могли лучше видеть выравнивание):
<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>
Bootstrap 4, горизонтальное и вертикальное выравнивание содержимого с помощью flex box
<div class="page-hero d-flex align-items-center justify-content-center">
<h1>Some text </h1>
</div>
Используйте класс начальной загрузки align-items-center и 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>
Не нужно усложнять вещи. В Bootstrap 4 вы можете просто выравнивать элементы по горизонтали внутри столбца, используя поле auto class my-auto
<div class="col-md-6 my-auto">
<h3>Lorem ipsum.</h3>
</div>
Для центрирования содержимого столбцов вы можете объявить пустые столбцы до и после этого, убедившись, что общее количество столбцов составляет до 12...
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-10">
(YOUR CENTERED CONTENT HERE)
</div>
<div class="col-xs-1"></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 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
Теги <center></center>
хорошо сработали для меня..
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">
<center>content</center>
</div>
</div>.....