logo标签列表

Bootstrap：如何在列中真正居中一张图片？

htmlcssbootstrap-4
3
我想使用Bootstrap在4个堆叠的列中放置4张图片。以下是我的代码:

我想使用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张图片在大屏幕上左上角对齐，我想让它们垂直和水平地居中显示，无论图像的宽度或高度如何变化，我该怎么做？我在网上搜索了一下，但似乎没有解决这个问题的方法。

最初的回答：

Bootstrap提供了一系列的类，您可以直接应用于对象来实现居中对齐。- https://getbootstrap.com/docs/4.3/utilities/flex/ - Andrew
6个回答
4
或者您可以使用flexbox来完成。将其添加到您的col-md-6中。
display: flex;
align-items: center;
justify-content: center
1

以下是最佳方式，使其具有响应性：

在您的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>

你的解决方案在我将第二张图片的宽度改为100%后无法正常工作，它只能水平居中对齐图片，而不能垂直对齐。 - one-hand-octopus
1
使用类名 text-center 来使列（column）的 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>

如果我将第二张图片的宽度改为100%，你的解决方案只会水平居中对齐第一张图片，而不会垂直居中对齐。 - one-hand-octopus
0
根据你的代码...你可以直接使用 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>

0

这可能会对你有所帮助。请查看下面的示例。

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

0
@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的回答将所有图片水平和垂直居中对齐。
谢谢大家！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接