建议使用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;
}