Html 图像未与引导行的中心对齐

我刚开始学习编码，一直在努力使我的图像集中在引导行上。我已经尝试将中心块div应用于每个图像，使它们居中，但一个接一个地垂直。我将中心块应用于不做任何操作的行，并在行前后创建div，以测试这是否可行，但它没有。我尝试了文本对齐：居中；在所有不同的div上也没有运气

<div class="row">
 <img class="col-xs-3 col-md-1 img-responsive" src="img1.png">
 <img class="col-xs-3 col-md-1 img-responsive" src="img2.png">
 <img class="col-xs-3 col-md-1 img-responsive" src="img3.png">
</div>

.center-block {
  float: none;
}

.中央大厦{
浮动：无；
}

我不确定自己是否理解了这个问题，但希望它会有用。除息的 如果要在整个页面中居中显示.row，请使用col-xs-4（因为引导使用12列，如果有3个块，则12/3=4（对于每个div））

如果你知道的话，对不起。当我使用text align:center to div时，一切都正常

是的，引导使用

float:left

，但这是在

col-*-*

元素上，但是当您编写

.col-*-*{text align:center}

时，您定位的不是该div，而是该div内的所有内容

---

真希望有什么有用的东西。：）

我不确定我是否理解这个问题，但希望它会有用。除息的 如果要在整个页面中居中显示.row，请使用col-xs-4（因为引导使用12列，如果有3个块，则12/3=4（对于每个div））

如果你知道的话，对不起。当我使用text align:center to div时，一切都正常

是的，引导使用

float:left

，但这是在

col-*-*

元素上，但是当您编写

.col-*-*{text align:center}

时，您定位的不是该div，而是该div内的所有内容

---

真希望有什么有用的东西。：）

下面是一些可以应用于bootstrap3的定制CSS，它们将模拟可用于bootstrap4的内置

flexbox

类。只需将包含列的行显示为display:flex，并使用

justify content:center

将列水平居中即可

.flex行{
显示器：flex；
证明内容：中心；
}

---

以下是一些可应用于bootstrap3的自定义CSS，它们将模拟可用于bootstrap4的内置

flexbox

类。只需将包含列的行显示为display:flex，并使用

justify content:center

将列水平居中即可

.flex行{
显示器：flex；
证明内容：中心；
}

---

您可以使用这种简单的方法将它们放在行或另一个div的中间

HTML

---

您可以使用这种简单的方法将它们放在行或另一个div的内部

HTML

---

---

您使用的是引导3还是引导4？使用3。对不起，忘了提那件事了。另外，行在容器和jumbotron中（如果有关系的话）。如果您使用bootstrap 4，您可以使用类似这样的帮助器类，也可以使用bootstrap 3和自定义类执行相同的技术。我不确定使用bootstrap3是否有“bootstrap”的方法。你想让我写一些自定义的css来使用bootstrap3吗？那会很有帮助的。我将研究您的代码，并尝试理解我在未来的错误所在。您使用的是bootstrap 3还是4？使用3。对不起，忘了提那件事了。另外，行在容器和jumbotron中（如果有关系的话）。如果您使用bootstrap 4，您可以使用类似这样的帮助器类，也可以使用bootstrap 3和自定义类执行相同的技术。我不确定使用bootstrap3是否有“bootstrap”的方法。你想让我写一些自定义的css来使用bootstrap3吗？那会很有帮助的。我将研究您的代码，并尝试理解我在未来的错误所在。我使用col-xs-3 col-md-1，因为我希望图像非常小。我尝试了文本对齐：居中；在col-Div上，但它不起作用。如果你想看一看，下面是我正在处理的FCC项目的代码笔：如果你想要更小的图像，只需添加css:img{width:75%}例如。对于定心行，您需要使用col-xs-4或col offset-*。这是我在工作中一直意识到的解决方案，我们只使用它来集中多个元素。；）我使用col-xs-3 col-md-1是因为我希望图像非常小。我尝试了文本对齐：居中；在col-Div上，但它不起作用。如果你想看一看，下面是我正在处理的FCC项目的代码笔：如果你想要更小的图像，只需添加css:img{width:75%}例如。对于定心行，您需要使用col-xs-4或col offset-*。这是我在工作中一直意识到的解决方案，我们只使用它来集中多个元素。；）这非常有效，但不幸的是，我不知道为什么，因为我以前从未遇到过flex。你知道为什么我以前试过的所有方法都不起作用吗？Bootstrap3使用

float

创建列。并且不能使用

text align:center

将浮动元素居中，因为这只适用于

inline/inline block

元素，而浮动元素是

block

。和

。中间块

带有

浮动：无

只会使图像

显示：块；保证金：自动，这将打断列，因为它们不再是浮动的。@LearningTowBDEV这是flexbox上的一个很好的资源，它工作得很好，但不幸的是，我不知道为什么，因为我以前从未遇到过flex。你知道为什么我以前试过的所有方法都不起作用吗？Bootstrap3使用
float
创建列。并且不能使用
text align:center
将浮动元素居中，因为这只适用于
inline/inline block
元素，而浮动元素是
block
。和
。中间块
带有
浮动：无
只会使图像
显示：块；保证金：自动，这将破坏colu
<div class="row">
 <img class="col-xs-3 col-md-1 img-responsive" src="img1.png">
 <img class="col-xs-3 col-md-1 img-responsive" src="img2.png">
 <img class="col-xs-3 col-md-1 img-responsive" src="img3.png">
</div>

.row{
 display: block;
 text-align: center;
}

.row img{
 display: inline-block;
}