Как центрировать div с помощью Twitter Bootstrap 3

Последнее обновление 28 мая 2019 07:35:41 (UTC / GMT +8 часов)

script1adsense2code

script1adsense3code

Задача

Используя вспомогательный класс center-block Twitter Bootstrap, который доступен в Bootstrap 3.2, вы можете центрировать div.

класс центральных блоков содержит следующий код CSS

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

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

Следующий код показывает, как использовать center-block

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Center a Div in Twitter Bootstrap 3</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <style type="text/css">
    .center-block {
    width:250px;
    padding:10px;
    background-color:#eceadc;
    color:#ec8007
    }
    </style>
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
    <div class="row">
    <div class="center-block">
    <p>Lorem ipsum dolor sit amet, animal postulant complectitur duo ei. Eros iracundia contentiones id cum. Utinam soleat apeirian nam cu. Unum labore principes no pro, dolor omnium quo eu, quod similique eu eum.</p>
<p>His ut alii populo putent, illud populo repudiare duo an. Wisi comprehensam te quo. Viris maluisset cu has, te dico utamur appareat pro, ex probo quidam interesset pri. Duo ad sensibus torquatos adolescens, sit minim labores nominati ne. Cu dolorum ocurreret mei, nam novum zril expetenda ne.</p>
    </div>
    </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Посмотрите живую демонстрацию вышеупомянутого .

Обратите внимание, что когда элемент центрируется таким образом, элемент помещается непосредственно в класс строки.

Предыдущая: /twitter-bootstrap/center-a-div.php
Далее: Вариации с использованием Bootstrap Material Design