Question

我有3个图像我想显示它们的内联样式，但是没有使用引导网格系统，因为我希望它们彼此靠近并居中，我试着这样做但是一旦我添加了它们得到的文本彼此显示，我该如何解决？这是我的代码：

＆＃13;

.box{
display:inline;
}

＆＃13;

<div class="text-center">
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
</div>

＆＃13;

Answer 1

你很亲密，但它应该是display: inline-block。请参阅代码段：

.box{
display:inline-block;
}

<div class="text-center">
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
</div>

注意：我看到你已经在Stack Overflow上添加了text-center类，但这应该在你自己的代码中完成。

Answer 2

你也可以在父母身上使用flex，它会将它们并排放置。

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center boxes">
  <div class="box">
    <img src="http://placehold.it/50x50" style="height:120px">
    <p>Test</p>
  </div>
  <div class="box">
    <img src="http://placehold.it/50x50" style="height:120px">
    <p>Test</p>
  </div>
  <div class="box">
    <img src="http://placehold.it/50x50" style="height:120px">
    <p>Test</p>
  </div>
</div>

Answer 3

CSS Flexbox 拯救（以及正确的HTML语义和没有内联CSS样式）！

.container { display:flex; justify-content:center; }
.container figure { text-align:center; margin:0; }
.container img { height:120px; }

<div class="text-center container">
  <figure>
    <img src="http://placehold.it/50x50">
    <figcaption>Test</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/50x50">
    <figcaption>Test</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/50x50">
    <figcaption>Test</figcaption>
  </figure>
</div>

显示内嵌框内的文本div

3 个答案: