Question

我想使用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张图像对齐到左上方（在大屏幕上），我想要的是将它们在中心垂直和水平对齐，而不管图像宽度或高度如何变化，我该怎么办？我在网上进行搜索，但似乎没有什么能真正解决问题。

Answer 1

或者您可以使用flexbox来实现。

添加到您的col-md-6

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

Answer 2

这是最好的方法，可以使其具有响应能力：

添加到您的CSS：

.rounded{
  display:block;
  margin-left: auto;
  margin-right: auto;
}

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

Answer 3

使用类text-center到div列

<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 text-center" 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 text-center" 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 text-center" 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 text-center" 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>

Answer 4

根据您的代码...您可以只使用margin-left:25%;。对所有图像使用img标签。您也可以使用图片class="text-center"

img {
  margin-left:25%;
}

<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;float:middle">
						</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>

Answer 5

这可能会为您提供帮助。请检查以下示例。

.image-center {
            position: relative;
          }
          .image-center:after {
            display: inline-block;
            padding-bottom: 100%;
            content: "";
          }
          .image-center img {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            top: 0;
            margin: auto;
            width: auto;
            height: auto;
            max-width: 70%;
            max-height: 70%;
          }

<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-sm-6" style="background-color:lavenderblush">
                            <div class="image-center">
                                <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">
                            </div>
                        </div>
                        <div class="col-sm-6" style="background-color:lavender">
                            <div class="image-center">
                                <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">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6" style="background-color:lavender">
                            <div class="image-center">
                                <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">
                            </div>
                        </div>
                        <div class="col-sm-6" style="background-color:lavenderblush">
                            <div class="image-center">
                                <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">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 6

@gionic解决了这个问题。在这种情况下其他人将无法使用：

.col-md-6{
  display: flex;
	align-items: center;
	justify-content: center
}

<html>
	<head>
	  <h3>Align the 4 images to the center horizontally and vertically, even with height change of some images, rest images should still in the center.</h3>
	  <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">
	  <link rel="stylesheet" href="testImageCenter.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:70%; 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:40%; 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:80%; 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:100%; margin-top: 10px; margin-bottom: 10px">
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

随着某些图像的高度变化，@ gionic的答案将所有图像水平和垂直对齐到中心。

谢谢！

Answer 7

您可以在center上使用div标签。或尝试将div放在center标签内。

 <div class="col-md-6" style="background-color:lavenderblush">
            <center>
                <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">
            </center>
    </div>

Bootstrap：如何真正地将图像居中显示在列中？

7 个答案: