欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

使用Twitter Bootstrap將專欄居中

CSS
林玟書1年前8瀏覽0評論

在Twitter Bootstrap 3中，如何在容器(12列)中將一列大小的div居中？

.centered {
  background-color: red;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

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

將列居中有兩種方法& ltdiv & gt在引導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>

注意:對于這兩種技術，您都可以跳過。行元素，并使列在. container內居中，但是您會注意到由于container類中的填充，實際列大小的差別很小。

更新:

因為3.0.1 Bootstrap有一個名為center-block的內置類，它使用margin: 0 auto，但缺少float:none，所以您可以將它添加到CSS中，使其與網格系統一起工作。

引導數據庫5(2023年更新)

引導程序5也是基于flexbox的，因此居中類似于引導程序4。自動邊距可用于將列推到中間...

<div class="row">
     <div class="col-3 mx-auto text-center border">
         <p>
            I'm centered (margin: auto)
         </p>
     </div>
</div>

-或者-

使用flexbox實用程序類(即:justify-content-center)居中...

<div class="row justify-content-center">
        <div class="col-4 text-center border">
            <p>
                I'm centered
            </p>
        </div>
</div>

https://codeply.com/p/9mpTQJ3fIn

引導數據庫4(2020年更新)

使用基于flexbox的Bootstrap 4，對中方法發生了變化..

文本居中仍然用于顯示:行內元素 mx-auto將中心塊替換為中心顯示:塊元素 offset-*或mx-auto可用于使網格列居中 mx-auto(自動x軸邊距)將居中顯示:塊或顯示:具有定義寬度的flex元素(%、vw、px等)..).Flexbox默認用于網格列，因此也有各種flexbox居中方法。

演示引導4水平居中

關于BS4中的垂直居中，請參見https://stackoverflow.com/a/41464397/171456

自舉3(原答案)

將列居中的首選方法是使用& quot偏移& quot(即:col-md-offset-3)

Bootstrap 3.x居中示例

對于居中元素，有一個中心塊輔助類。

您也可以使用文本居中將文本(和內聯元素)居中。

響應演示:https://codeply.com/p/sRH9hSKup1

EDIT——正如注釋中提到的，center-block處理列內容和display:block元素，但不會處理列本身(col-* divs ),因為Bootstrap使用float。

現在Bootstrap 3.1.1正在使用。中心塊，這個輔助類與柱系統一起工作。

引導3助手類中心。

請檢查這個jsfiddle演示:

<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

使用col-center-block輔助類的行列居中。

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

只需將以下內容添加到您的自定義CSS文件中。不建議直接編輯引導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>

Bootstrap 3現在為此提供了一個內置的類。中心塊

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

如果你還在用2。然后把它添加到你的CSS中。

我將列居中的方法是對列使用display: inline-block，對容器父級使用text-align: center。

你只需要將CSS類“居中”添加到行中。

HTML:

<div class="container-fluid">
  <div class="row centered">
    <div class="col-sm-4 col-md-4">
        Col 1
    </div>
    <div class="col-sm-4 col-md-4">
        Col 2
    </div>
    <div class="col-sm-4 col-md-4">
        Col 3
    </div>
  </div>
</div>

CSS:

.centered {
   text-align: center;
   font-size: 0;
}
.centered > div {
   float: none;
   display: inline-block;
   text-align: left;
   font-size: 13px;
}

http://jsfiddle.net/steyffi/ug4fzcjd/

Bootstrap版本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>

使用引導v3和v4，只需添加即可實現。將內容中心對齊。row & ltdiv & gt

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

https://get bootstrap . com/docs/4.0/utilities/flex/# justify-content

這個管用。這可能有點粗糙，但效果很好。已測試其響應性(Y)。

.centered {
    background-color: teal;
    text-align: center;
}

Desktop

Responsive

使用bootstrap 4，您可以簡單地嘗試這里提到的justify-content-md-center

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
              1 of 3
        </div>
        <div class="col-md-auto">
            Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col">
             1 of 3
        </div>
        <div class="col-md-auto">
                Variable width content
        </div>
        <div class="col col-lg-2">
              3 of 3
        </div>
    </div>
</div>

enter image description here

為了使列居中，我們需要使用下面的代碼。除了自動邊距之外，列也是浮動元素。我們還將把它設置為不浮動，

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

為了使上面的col-lg-1居中，我們將編寫:

.centered {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

要使div內的內容居中，可以使用text-align:center，

.centered {
    text-align: center;
}

如果你想讓它只在桌面和大屏幕上居中，而不是在移動設備上，那么使用下面的媒體查詢。

@media (min-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

要使div只在移動版本上居中，使用下面的代碼。

@media (max-width: 768px) {
    .centered {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

只需將顯示內容的一列設置為col-xs-12(mobile-first；-)，配置容器只是為了控制您希望居中內容的寬度，所以:

.container {
  background-color: blue;
}
.centered {
    background-color: red;
}

<body class="container col-xs-offset-3 col-xs-6">
    <div class="col-xs-12 centered">
        <img data-src="holder.js/100x100" alt="" />
    </div>
</body>

您可以對行使用文本居中，并確保內部div顯示:inline-block(帶not 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/

另一種偏移方法是使用兩個空列，例如:

<div class="col-md-4"></div>
<div class="col-md-4">Centered Content</div>
<div class="col-md-4"></div>

這可能不是最好的答案，但有一個更有創意的解決方案。正如koala_dev指出的，列偏移只對偶數列有效。但是，通過嵌套行，也可以實現不均勻列的居中。

堅持原來的問題，你想把1列放在12列的網格中央。

將2列偏移5，使其居中 創建一個嵌套行，這樣在2列中就有了新的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>

看到這個小提琴，請注意，你必須增加輸出窗口的大小，才能看到結果，否則列將換行。

這不是我的代碼，但它工作得很好(在Bootstrap 3上測試過),而且我不必在col-offset上浪費時間。

演示:

/* centered columns styles */

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

<div class="container">
  <div class="row text-center">
    <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>

將下面的代碼段追加到。row或your .col。這是用于Bootstrap 4*的。

d-flex justify-content-center

其機制是:

將所有列包裝在一個div中。 將div制作成具有固定布局表格。 將每列作為表格單元格。 使用vertical-align屬性控制內容位置。 樣本演示在這里Enter image description here

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

/* 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;
}

enter image description here

正如koala_dev在他的方法1中使用的，我更喜歡偏移方法，而不是使用有限的中心塊或邊距，但是正如他提到的:

這種方法有一個明顯的缺點，它只適用于偶數列，所以。col-X-2，。支持col-X-4、col-X-6、col-X-8和col-X-10。

這可以通過對奇數列使用以下方法來解決。

<div class="col-xs-offset-5 col-xs-2">
    <div class="col-xs-offset-3">
        // Your content here
    </div>
</div>

使用Bootstrap 4在div類中使用mx-auto。

<div class="container">
  <div class="row">
    <div class="mx-auto">
      You content here
    </div>
  </div>
</div>

引導程序4解決方案:

<div class="container">
  <div class="row">
    <div class="col align-self-center">
      Column in the middle, variable width
    </div>
  </div>
</div>

因為我從來不需要只集中一個。在一個. 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>

對于那些當您沒有準確的數字來填充網格時希望將列元素放在屏幕中央的人，我編寫了一小段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個元素，并且希望在md屏幕上每行有3個元素，您可以這樣做:

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整除。

要使引導行中的多列居中(列數為奇數),只需將這個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>

試試這個

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

您也可以使用其他col，如col-md-2等。

我建議簡單地使用類文本中心:

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

您可以將非常靈活的解決方案flexbox用于您的引導。

justify-content: center;

可以使您的列居中。

看看flex。

試試這段代碼。

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

這里我使用了col-lg-1，為了在大型設備上正確地將div居中，偏移量應該是10。如果你需要它集中在中型到大型設備，然后只需改變lg到md等等。