Центрируйте четыре divs в строке бутстрапа [duplicate]

Question

Центрируйте четыре divs в строке бутстрапа [duplicate]

Убедитесь, что на вашем сервере установлен Sendmail.

Если вы проверили свой код и проверили, что там нет ничего плохого, перейдите в / var / mail и проверьте, пуста ли эта папка.

Если он пуст, вам нужно будет сделать:

sudo apt-get install sendmail

, если вы находитесь на сервере Ubuntu.

1008

html css twitter-bootstrap twitter-bootstrap-3

задан Damjan Pavlica 18 April 2016 в 11:32

20 ответов

Это не мой код, но он отлично работает (проверен на Bootstrap 3), и мне не нужно возиться с col-offset.

Демо:

/* centered columns styles */

.row-centered {
  text-align: center;
}

.col-centered {
  display: inline-block;
  float: none;
  /* reset the text-align */
  text-align: left;
  /* inline-block space fix */
  margin-right: -4px;
  text-align: center;
  background-color: #ccc;
  border: 1px solid #ddd;
}

<div class="container">
  <div class="row row-centered">
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-6 col-centered">Column 6</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
    <div class="col-xs-3 col-centered">Column 3</div>
  </div>
</div>

2

ответ дан Ahmed Hussein 21 August 2018 в 14:59

Вы можете использовать text-center для строки и убедиться, что внутренние divs имеют display:inline-block (с не float)

как:

<div class="container">
    <div class="row text-center" style="background-color : black;">
        <div class="redBlock">A red block</div>
        <div class="whiteBlock">A white block</div>
        <div class="yellowBlock">A yellow block</div>
    </div>
</div>

и css:

.redBlock {
    width: 100px;
    height: 100px;
    background-color: aqua;
    display: inline-block
}
.whiteBlock {
    width: 100px;
    height: 100px;
    background-color: white;
    display: inline-block
}
.yellowBlock {
    width: 100px;
    height: 100px;
    background-color: yellow;
    display: inline-block
}

Скрипка: http://jsfiddle.net/DTcHh/3177/

6

ответ дан Alireza Fattahi 21 August 2018 в 14:59

Попробуйте этот код.

<body class="container">
<div class="col-lg-1 col-lg-offset-10">
    <img data-src="holder.js/100x100" alt="" />
</div>

Здесь я использовал col-lg-1, а смещение должно быть 10 для правильной центровки div на больших устройствах, если вам нужно, чтобы он сосредоточился на медиане на большом устройстве, а затем просто изменил lg на md и т. д., дайте мне знать, если какая-либо проблема.

1

ответ дан Bangash 21 August 2018 в 14:59

Если вы поместите это в свою строку, все столбцы внутри будут центрированы:

.row-centered {
    display: flex;
    justify-content: space-between;
}

1

ответ дан Eran Shabi 21 August 2018 в 14:59

1

сделал элемент нечувствительным. – gfivehost 17 February 2017 в 15:22

Попробуйте это

<div class="row">
    <div class="col-xs-2 col-xs-offset-5"></div>
</div>

Вы можете использовать другие col, а также col-md-2 и т. д.

4

ответ дан JGallardo 21 August 2018 в 14:59

С помощью Bootstrap v4 это можно сделать, просто добавив .justify-content-center к .row <div>

<div class="row justify-content-center">
    <div class="col-1">centered 1 column</div>
</div>

https://getbootstrap.com/docs/4.0/ утилиты / Flex / # оправдает-контента

2

ответ дан joknawe 21 August 2018 в 14:59

Bootstrap version 3 имеет класс .text-center.

Просто добавьте этот класс:

text-center

Он просто загрузит этот стиль:

.text-center {
    text-align: center;
}

Пример:

<div class="container-fluid">
  <div class="row text-center">
     <div class="col-md-12">
          Bootstrap 4 is coming....
      </div>
  </div>
</div>

25

ответ дан JoshYates1980 21 August 2018 в 14:59

1

Уточнить, где будет добавлен этот класс? – aksu 20 September 2016 в 16:34
2

Привет @aksu, вам не нужно добавлять какие-либо .css. Посмотрите приведенный пример. – JoshYates1980 28 October 2016 в 15:42

Для тех, кто хочет центрировать элементы столбца на экране, когда у вас нет точного числа, чтобы заполнить вашу сетку, я написал небольшой фрагмент JavaScript, чтобы вернуть имена классов:

function colCalculator(totalNumberOfElements, elementsPerRow, screenSize) {
    var arrayFill = function (size, content) {
        return Array.apply(null, Array(size)).map(String.prototype.valueOf, content);
    };

    var elementSize = parseInt(12 / elementsPerRow, 10);
    var normalClassName = 'col-' + screenSize + '-' + elementSize;
    var numberOfFittingElements = parseInt(totalNumberOfElements / elementsPerRow, 10) * elementsPerRow;
    var numberOfRemainingElements = totalNumberOfElements - numberOfFittingElements;
    var ret = arrayFill(numberOfFittingElements, normalClassName);
    var remainingSize = 12 - numberOfRemainingElements * elementSize;
    var remainingLeftSize = parseInt(remainingSize / 2, 10);
    return ret.concat(arrayFill(numberOfRemainingElements, normalClassName + ' col-' + screenSize + '-push-' + remainingLeftSize));
}

Если у вас есть 5 элементов, и вы хотите иметь 3 строки на экране md, вы делаете это:

colCalculator(5, 3, 'md')
>> ["col-md-4", "col-md-4", "col-md-4", "col-md-4 col-md-push-2", "col-md-4 col-md-push-2"]

Имейте в виду, что второй аргумент должен быть делимым на 12.

2

ответ дан jsgoupil 21 August 2018 в 14:59

Метод 1:

<div class="container">
    <div class="row">
        <div class="col-md-2 col-md-offset-5">
            YOUR CONTENT
        </div>
    </div>
</div>

Способ 2:

CSS

.float-center{float: none;}


<div class="container">
    <div id="mydev" class="center-block float-center" style="width:75%;">
        YOUR CONTENT
    </div>
</div>

Bootstrap Советы, примеры и инструменты: OnAirCode

g0]

0

ответ дан Pacific P. Regmi 21 August 2018 в 14:59

Я предлагаю просто использовать класс text-center:

<body class="container">
    <div class="col-md-12 text-center">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

31

ответ дан Peter Mortensen 21 August 2018 в 14:59

1

работает только потому, что элемент имеет встроенный дисплей. img может быть задан как блок. – ProfileTwist 12 August 2013 в 19:34
2

Но это работает, и я не вижу причины для голосования. – Ali Gajani 12 August 2013 в 19:34
3

Возможно, в вашем изолированном случае тестирования. Я бы добавил .centered img { display: inline; } к вашему ответу, а затем вместо этого он был бы достоин голосования. – ProfileTwist 13 August 2013 в 16:02
4

Нет проблем. Я уверен, что ОП найдет его ответ :) – Ali Gajani 13 August 2013 в 16:11
5

в bootstrap 3 класс .text-center делает то же самое изначально, как я узнал выше. – domoarigato 2 February 2015 в 20:43
6

2 бесполезных divs, col-md-offset- * лучше – ymakux 19 September 2015 в 18:56
7

Согласен. Я использовал этот метод, потому что он действительно работает хорошо и проверен. – LeRoy 21 September 2015 в 07:07
8

Это единственный ответ, который работал в 100% случаев. Другие работали, но не тогда, когда bootstrap переключился на мобильный вид (элементы были перемещены влево). – Levi Fuller 6 July 2016 в 16:10
9

Это был единственный, который работал и с меня. Блок-центр работает только для одного столбца, и мне нужно центрировать все столбцы независимо от их количества. – cjohansson 8 December 2016 в 13:13
10

Только решение, которое сработало и для меня. Другие работали только тогда, когда браузер был окном (не полноэкранным). – kiwicomb123 29 June 2017 в 03:30

Это, вероятно, не самый лучший ответ, но есть еще одно творческое решение. Как указано koala_dev, коррекция столбцов работает только для четных размеров столбцов. Однако при вложенности строк вы можете также центрировать неравномерные столбцы.

Вставить исходный вопрос, где вы хотите центрировать столбец из 1 внутри сетки 12.

Центрировать столбец из 2, смещая его 5
Создайте вложенную строку, так что вы получите новые 12 столбцов внутри двух столбцов.
Поскольку вы хотите центрировать столбец из 1, а 1 - «половина» из 2 (то, что мы центрировали на шаге 1) теперь вам нужно центрировать столбец из 6 в вашей вложенной строке, что легко сделать путем его смещения 3.

Например:

<div class="container">
  <div class="row">
    <div class="col-md-offset-5 col-md-2">
      <div class="row">
        <div class="col-md-offset-3 col-md-6">
          centered column with that has an "original width" of 1 col
        </div>
      </div>
    </div>
  </div>
</div>

См. эту скрипту , обратите внимание, что вам нужно увеличить размер окна вывода, чтобы увидеть результат, иначе столбцы будут обертываться.

5

ответ дан reinder 21 August 2018 в 14:59

Чтобы центрировать более одного столбца в строке Bootstrap - и количество cols нечетно, просто добавьте этот класс css ко всем столбцам в этой строке:

.many-cols-centered {  // To horizontally center bootstrap odd cols, eg col-lg-9, col-md-3, works well in lg
  display:inline-block;
  float:none;
}

Итак, в вашем HTML у вас есть что-то вроде:

<div class="row text-center"> <!-- text-center centers all text in that row -->
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image1.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image2.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 many-cols-centered">
        <img src='assets/image3.jpg'>
        <h3>You See</h3>
        <p>I love coding.</p>
    </div>
</div>

2

ответ дан Ruto Collins 21 August 2018 в 14:59

Просто добавьте это в свой собственный CSS-файл, отредактировав файлы Bootstrap CSS напрямую, не рекомендуется и отменяет вашу способность использовать cdn.

.center-block {
    float: none !important
}

Почему?

Bootstrap CSS (Вер. 3.7 и ниже) использует: margin: 0 auto ;, но он переопределяется свойством float контейнера размера.

PS: После добавления этого класса не забудьте установить классы по правильному порядку.

<div class="col-md-6 center-block">Example</div>

51

ответ дан Sagive SEO 21 August 2018 в 14:59

1

Только сделал .центральный блок, чтобы работать, выполняя как этот ответ. – João Martins 26 March 2015 в 15:06
2

Я использую Bootstrap 3.3.7, и это единственный метод, который работает для меня! – illagrenan 6 September 2016 в 14:52
3

это работает. но не думайте, что нужно !important – Gianfranco P. 23 February 2017 в 14:51
4

@GianfrancoP. P. Ваше право, но ... это зависит от порядка загрузки, и я хотел бы предоставить надежный метод. – Sagive SEO 13 September 2017 в 21:37

У Bootstrap 3 теперь есть встроенный класс для этого .center-block

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Если вы все еще используете 2.X, просто добавьте это в свой CSS.

37

ответ дан Schmalzy 21 August 2018 в 14:59

1

это, вероятно, даст вам желаемый эффект. Также бросьте ширину на класс .centered или добавьте второй класс, если вы собираетесь использовать более модульный подход – Matt Lambert 9 August 2013 в 22:46
2

Добавление float: none; to .centered позволяет перемещать класс в контейнер. сохраняет код чистым – Adam Patterson 29 January 2014 в 05:50
3

не может использовать это в столбце, потому что no float:none; – airtonix 28 February 2015 в 04:49

Теперь Bootstrap 3.1.1 работает с .center-block, и этот вспомогательный класс работает с системой столбцов.

Bootstrap 3 Центр вспомогательного класса .

Пожалуйста, проверьте этот jsfiddle DEMO :

<div class="container">
    <div class="row">
        <div class="center-block">row center-block</div>
    </div>
    <div class="row">
        <div class="col-md-6 brd">
            <div class="center-block">1 center-block</div>
        </div>
        <div class="col-md-6 brd">
            <div class="center-block">2 center-block</div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-center-block">row col-xs-2 col-center-block</div>
</div>

Helper classes center [/g2]

Центр столбцов столбцов с помощью col-center-block вспомогательного класса.

.col-center-block {
    float: none;
    display: block;
    margin: 0 auto;
    /* margin-left: auto; margin-right: auto; */
}

90

ответ дан Sender 21 August 2018 в 14:59

1

Я получил эту работу, не добавляя float:none, убедившись, что в центральном блоке div применен стиль style="width : ?px". Например, ширина изображения. Работает с 3.2.2 – ppumkin 4 March 2015 в 22:31
2

margin: 0 auto; - достаточно вместо margin-left + margin-right – Mikhail Morgunov 29 August 2016 в 10:06

Предпочтительным методом центрирующих столбцов является использование «смещений» (т.е.: col-md-offset-3)

Примеры центровки центровки Bootstrap 3.x

Для центрирующие элементы, есть center-block класс-помощник .

Вы также можете использовать text-center для центра текста (и встроенных элементов).

Демоверсия : http://bootply.com/91632

EDIT - Как указано в комментариях, center-block работает над содержимым столбца и display:block элементов, но не будет работать над самим столбцом (col-* divs), потому что Bootstrap использует float.

Обновление 2018

Теперь с помощью Bootstrap 4 методы центрирования изменились ..

text-center по-прежнему используется для display:inline
mx-auto заменяет элементы center-block на центр display:block
offset-* или mx-auto можно использовать для центрирования столбцов сетки

mx-auto (поля автоматической оси x) будут центрировать элементы display:block или display:flex, которые имеют определенную ширину , (%, vw, px и т. д.). Flexbox используется по умолчанию для столбцов сетки, поэтому существуют также различные методы центровки по методу flexbox.

Демо-бутстрап 4 Горизонтальное центрирование

Для вертикального центрирования в BS4 см. https://stackoverflow.com/a/41464397/171456

247

ответ дан Themes.guide 21 August 2018 в 14:59

1

К сожалению, этот вспомогательный класс не работает с системой столбцов, так как он не заботится о свойстве float. См. эту демонстрацию , например. – koala_dev 5 December 2013 в 20:03
2

Для этого требуется только центральный блок {float: none; }, и он работает. bootply.com/122268 – Matias Vad 16 March 2014 в 13:33
3

не уверен в OP, но я здесь искал детали text-center, которые не были предоставлены ни одним из других ответов. Этот голос получает мой голос. – domoarigato 2 February 2015 в 20:41
4

не может использовать это в столбце, потому что no float:none; – airtonix 28 February 2015 в 04:50
5

Я отредактировал ответ о смещениях. – Themes.guide 10 February 2016 в 14:41

Поскольку мне никогда не нужно центрировать только один .col- в пределах .row, я устанавливаю следующий класс в обертке .row моих целевых столбцов.

.col-center > [class*="col-"] {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

Пример

<div class="full-container">
    <div class="row col-center">
        <div class="col-xs-11">
            Foo
        </div>
        <div class="col-xs-11">
            Bar
        </div>
    </div>
</div>

2

ответ дан Walter Roman 21 August 2018 в 14:59

5

ответ дан JGallardo 1 November 2018 в 08:41

32

ответ дан Peter Mortensen 1 November 2018 в 08:41

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

html css twitter-bootstrap twitter-bootstrap-3

Подход 1 (смещения):

Первый подход использует собственные классы смещения Bootstrap, поэтому он не требует изменение разметки и отсутствие дополнительных CSS. Ключ должен установить смещение, равное половине оставшегося размера строки. Например, столбец размером 2 был бы центрирован добавлением смещения 5, это (12-2)/2.

В разметке это будет выглядеть так:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Теперь, существует очевидный недостаток этого метода, он работает только для четных размеров столбцов, поэтому поддерживаются только .col-X-2, .col-X-4, col-X-6, col-X-8 и col-X-10.

Подход 2 (старое поле: авто)

Вы можете центрировать любой размер столбца, используя проверенную технику margin: 0 auto;, вам просто нужно позаботиться о плавании, которое добавляется сеткой Bootstrap. Я рекомендую определить собственный CSS-класс следующим образом:

.col-centered{
    float: none;
    margin: 0 auto;
}

Теперь вы можете добавить его к любому размеру столбца при любом размере экрана, и он будет легко работать с отзывчивой компоновкой Bootstrap:

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Примечание. При использовании обоих методов вы можете пропустить элемент .row и иметь столбец с центром внутри .container, но вы заметили бы минимальную разницу в фактическом размере столбца из-за заполнения в классе контейнера.

Обновление:

Поскольку v3.0.1 Bootstrap имеет встроенный класс с именем center-block, который использует margin: 0 auto, но отсутствует float:none. Вы можете добавить это в свой CSS, чтобы он работал с сеткой.

Я думаю, что нет никакого float: none в правиле центрального блока, потому что существует независимое правило clearfix, которое вы можете добавить к элементам для очистки поплавков. — Diego Fernando Murillo Valenci, 8 July 2014 в 21:01
@DiegoFernandoMurilloValenci .clearfix не будет работать в этом случае, потому что он не удаляет свойство float для элементов (которое необходимо центрировать с помощью margin: 0 auto), оно просто заставляет контейнер обертывать любые плавающие элементы внутри — koala_dev, 9 July 2014 в 00:10
не может использовать это в столбце, потому что no float:none; — airtonix, 28 February 2015 в 04:50
Отзывчивые центрированные столбцы бутстрапа minimit.com/articles/solutions-tutorials/… — Gothburz, 24 October 2015 в 23:44
Если вы хотите сосредоточить более одного столбца в одной строке, см. Этот ответ stackoverflow.com/questions/28683329/… — Conor Svensson, 17 May 2016 в 11:19

Центрируйте четыре divs в строке бутстрапа [duplicate]

20 ответов

Подход 1 (смещения):

Подход 2 (старое поле: авто)

Обновление 2018

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