Question

如何将图像排成一行。我的代码不起作用。

<div class="container">
    <div class="row">
        <div class="col s10">
            <img class="center" src="house.png" alt="House"/>
        </div>
    </div>
</div>

文字广告代码没有问题（例如h1或p）

编辑：班级center-align也无效。

Answer 1

您可以像这样使用text-center：

<div class="container">
   <div class="row">
      <div class="col s10 text-center">
          <img class="center" src="house.png" alt="House"/>
      </div>
   </div>
</div>

Answer 2

创建一个用于居中图像的类。

.img-center {
  margin:0 auto;
  display:block;
}

使用.text-center 仅适用于display:inline张图片。大部分时间您的图片都是display:block。上面的解决方案没有考虑到这一点。

适用于您的图片：

.col {
  border:1px solid green;
}


.img-center { 
  display:block;
  margin:0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
   <div class="row">
      <div class="col s10">
          <img class="img-center" src="https://placehold.it/200x100" alt="House"/>
      </div>
   </div>
</div>

如何将图像连续居中

2 个答案: