62
задан 23 January 2018 в 00:30

8 ответов

Использование:

<!-- 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">
115
ответ дан 31 October 2019 в 13:31

Загрузитесь соглашения о присвоении имен несут собственные стили, 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>

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

14
ответ дан 31 October 2019 в 13:31

Используйте 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>
6
ответ дан 31 October 2019 в 13:31

Никакая потребность усложнить вещи. С Начальной загрузкой 4, можно просто выровнять объекты горизонтально в столбце с помощью граничного автоматического класса my-auto

         <div class="col-md-6 my-auto">
           <h3>Lorem ipsum.</h3>
         </div>
6
ответ дан 31 October 2019 в 13:31

Загрузитесь 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>
5
ответ дан 31 October 2019 в 13:31

Я знаю, что этот вопрос стар. И вопрос не сделал упомянутый, какую версию Начальной загрузки он использовал. Таким образом, я предположу, что ответ на этот вопрос разрешен.

, Если какой-либо из Вас (как я) наткнулся на этот вопрос и поиск ответа с помощью текущего (2019) платформа начальной загрузки, то вот решение.

Начальная загрузка 4

Использование 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>
5
ответ дан 31 October 2019 в 13:31
//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>
0
ответ дан 31 October 2019 в 13:31

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


0
ответ дан 31 October 2019 в 13:31

Другие вопросы по тегам:

Похожие вопросы: