引导4中心图像但文本左对齐
引导4中心图像但文本左对齐
提问于 2018-10-20 15:46:51
我用的是Bootstrap 4，我有这样的一排：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Row -->
<div class="container">
<div class="row">
<div class="col-lg-4">
<img src="https://cdn.pixabay.com/photo/2018/10/15/18/32/bee-eaters-3749679_960_720.jpg" alt="" class="img-fluid">
<p>My First Text</p>
</div>
<div class="col-lg-4">
<img src="https://cdn.pixabay.com/photo/2013/04/04/12/34/sunset-100367_960_720.jpg" alt="" class="img-fluid">
<p>My Second Text</p>
</div>
<div class="col-lg-4">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" alt="" class="img-fluid">
<p>My Third Text</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
这很好--但一旦我缩小了浏览器的大小，我就有了它们之间的图像，这也是人们所期望的。尽管如此，这些图像现在仍然是对齐的。所以在移动视图中，我希望图像也是水平的，居中，但是相应的文本左对齐。当我将“文本中心”添加到列中时，图像既是水平中心，也是文本。那么，我如何使图像居中，却使文本左对齐，与图像的左边对齐呢？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-20 16:01:29
不要使用text-center，而是在图像上使用mx-auto d-block .
<img src="..." alt="" class="img-fluid mx-auto d-block">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52907408
复制相关文章
相似问题
腾讯云开发者
