时间戳

首页 > 解决方案 > Bootstrap：如何真正使图像在列中居中？

html - Bootstrap：如何真正使图像在列中居中？

问题描述

我想使用 Bootstrap 将 4 个图像放在 4 个堆叠的列中。这是我的代码：

<html>
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">
          <div class="row">
            <div class="col-md-6" style="background-color:lavenderblush">
	      <img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
            </div>
	    <div class="col-md-6" style="background-color:lavender;">
	      <img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
	    </div>
	  </div>
	  <div class="row">
	    <div class="col-md-6" style="background-color:lavender">
	      <img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
            </div>
	    <div class="col-md-6" style="background-color:lavenderblush;">
	      <img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
	    </div>
	  </div>
	</div>
      </div>
    </div>
  </body>
</html>

4个图像对齐左上角（在大屏幕上），我想要的是在中心垂直和水平对齐它们，无论图像宽度或高度有什么变化，我该怎么做？我在网上进行了搜索，但似乎没有什么能真正解决问题。

标签： htmlcssbootstrap-4

解决方案

或者你可以用 flexbox 来做。

添加到您的col-md-6

display: flex;
align-items: center;
justify-content: center

推荐阅读