建議使用Bootstrap在div中水平對齊元素的方法

Question

我希望元素並排，而不是彼此重疊。

當我說最好的方法時，我希望元素在更改屏幕大小時不重疊。

這是我的HTML：

<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
    <div class="col-md-offset-1 col-sm-12 col-md-10" style="background-color: #f6f6ff;">
        <img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
        <h1>2</h1>
        <img src="media/github.png" alt="GitHub" height="150" width="150">
    </div>
</div>

這是它的外觀圖：

Answer 1

現在，您有一個將兩個圖像分開的h1。 由於標題標簽默認為塊級元素，因此無法使用h1將它們並排排列。 但是，如果將每個圖像/標題放在它們自己的列中，它們將對齊：

<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
    <div class="row">

        <div class="col-xs-6">
            <h1>1</h1>
            <img src="http://placehold.it/150x150" alt="Subversion" height="150" width="150">
        </div>

        <div class="col-xs-6">
            <h1>2</h1>
            <img src="http://placehold.it/150x150" alt="GitHub" height="150" width="150">
        </div>

        <div class="clearfix"></div>

  </div>
</div>

自舉

Answer 2

使用網格系統規模達12列，如描述在這里

<div class="row">
  <div class="col-md-4">
    <img src="media/subversion_logo-384x332.png" alt="Subversion" height="150"  width="150">
  </div>
  <div class="col-md-4">
    <h1>2</h1</div>
  <div class="col-md-4"> 
    <img src="media/github.png" alt="GitHub" height="150" width="150
</div>

您可以通過增加/減少col-md-4來更改列的大小

Answer 3

如果希望兩個元素並排，則可以使用引導網格中的 “ row”和“ col”。

例如，這是編碼2張圖像的方法：

<div class="row">
  <div class="col-lg-6">
    <img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
  </div>
  <div class="col-lg-6">
    <img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
  </div>
</div

Answer 4

引導程序答案是最好的。 之前我有相同的要求，唯一的區別是不同列中的內容在大屏幕上的視覺分布過於分散是不可接受的。 在這種情況下，您將使用原始的html並使用css

.container-fluid div > * {
    margin: 0 auto;
    display: inline;
}