图像未对准自举行的中心

我刚开始学习编码，并一直试图让我的图像以引导行为中心。我尝试将中央块div应用于每个以它们为中心的图像，但是一个接一个地垂直。我将中心块应用于不执行任何操作的行，并且还在行的前后创建了div，以测试该行是否可行，但是没有。我试过text-align：center;在所有不同的divs上也没有运气。图像未对准自举行的中心

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

来源

2017-06-15 learningtowebdev

您使用的自举3或4？ –

使用3.对不起，忘了提。此外，该行在容器内，并且如果重要的话就是jumbotron。 – learningtowebdev

如果你使用bootstrap 4，你可以用这样的助手类来完成https://codepen.io/anon/pen/KqNyGg –

下面是一些可以应用于bootstrap3的自定义CSS，它将模拟可以在bootstrap4中使用的内置flexbox类。只需制作包含列display: flex的行并使用justify-content: center即可水平居中列。

.flex-row { 
 
    display: flex; 
 
    justify-content: center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row text-center flex-row"> 
 
    <div class="col-xs-3 col-md-1"> 
 
     <img class="img-responsive" src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    </div> 
 
    <div class="col-xs-3 col-md-1"> 
 
     <img class="img-responsive" src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    </div> 
 
    <div class="col-xs-3 col-md-1"> 
 
     <img class="img-responsive" src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-06-15 22:13:56

这工作完美，但不幸的是，我不知道为什么，因为我以前从来没有遇到flex。你知道为什么我以前试过的所有东西都不起作用吗？ – learningtowebdev

bootstrap 3使用'float'来创建它的列。而且你不能使用'text-align：center'来居中浮动元素，因为它只适用于'inline/inline-block'元素，浮动元素是'block'。 ''中心块'与'浮动：无'将只是使图像'显示：块; margin：auto;'，因为它们不再被浮动，所以会破坏列。 –

@learningtowebdev这是Flexbox上的一个很好的资源https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

我不确定我是否理解问题，但希望它会有用。 xD 如果你想在所有页面中心你的.row - 使用col-xs-4（因为bootstrap使用12列，如果你有3块，那么12/3 = 4（对于每个div））。

如果你知道，对不起。当我使用文本对齐：中心到div，一切正常。

是的，引导程序使用float: left，但这是col-*-*元素，但是当您编写.col-*-* {text-align: center}时，您不是定位该div，而是定位此div内的所有内容。

真的希望有用的东西。 :)

来源

2017-06-15 22:02:51

我使用col-xs-3 col-md-1，因为我希望图像很小。我试过text-align：center;在col - * - * divs但它不起作用。如果你想看一下我正在使用的FCC项目的codepen：https://codepen.io/Zed20/pen/PjNmer – learningtowebdev

如果你想要图像较小，只需添加css：img {width：75 ％} 例如。对于居中行，您需要使用col-xs-4或col-offset- *。这是我在工作中始终认识到的解决方案，我们只用它来集中多个元素。 ;） –

您可以使用简单的方法，他们居中行或其他div中。

HTML

<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>

CSS

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

.row img{ 
display: inline-block; 
}

来源

2017-06-15 22:18:47

图像未对准自举行的中心

回答

相关问题