将div与父div中的img垂直和水平居中对齐吗？

时间：2018-09-03 02:01:37

标签： html5 css3 bootstrap-4

我想在父div内同时对齐图像和div（水平和垂直居中），但我做不到，我已经尝试了2天。我正在使用引导程序4，HTML5，CSS3

图像不显示在代码段中 

<!-- Welcome Area -->
<div class="container-fluid p-0">
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" style="background-image: url(assets/images/main-img.jpg);">
      <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center">
        <img src="assets/images/auscene-icon-buttons-12-t.png" class="img-responsive img-fluid" id="welcome-area-img" style="visibility: hidden;" />
      </div>
    </div>
  </div>
</div>
<!-- End Welcome Area -->

<!--  Main area  -->
<div class="container-fluid">
  <div class="row pt-4 pb-4 mb-5 px-0">
    <div class="col-sm-2 col-md-1 col-lg-1 col-xl-1 px-0 text-center" style="width: 10% !important;" id="show-last-news-title">
      <img src="assets/images/auscene_icon_button_01_Y9u_icon.ico" class="img-responsive img-fluid pt-4" id="auscene-image-1">
    </div>
    <div class="col-sm-2 col-md-1 col-lg-1 col-xl-1 px-0 text-center" style="width: 10% !important;" id="show-last-how-to-title">
      <img src="assets/images/auscene_icon_button_02_xYm_icon.ico" class="img-responsive img-fluid pt-4" id="auscene-image-2">
    </div>
    <div class="col-sm-4 col-md-8 col-md-push-8 col-lg-8 col-xl-8 px-0" style="width: 60% !important;">
      <h1 class="text-left" style="font-size:3.5rem; color:#5acfc2; font-family:LouisGeorgeCafe;" id="welcome-area-title">Issue #01
      </h1>
      <h1 class="text-left" style="font-size:2rem; font-family:LouisGeorgeCafe;" id="welcome-area-subtitle"></h1>
    </div>
    <div class="col-sm-2 col-md-1 col-lg-1 col-xl-1 px-0 text-center" style="width: 10% !important;" id="show-last-guide-to-aucians-title">
      <img src="assets/images/auscene_icon_button_03_ClJ_icon.ico" class="img-responsive img-fluid pt-4" id="auscene-image-3">
    </div>
    <div class="col-sm-2 col-md-1 col-lg-1 col-xl-1 px-0 text-center" style="width: 10% !important;" id="show-last-in-depth-title">
      <img src="assets/images/auscene_icon_button_04_JP2_icon.ico" class="img-responsive img-fluid pt-4" id="auscene-image-4">
    </div>
  </div>
</div>
<!-- End of Main area -->

已更新：解决了无法对齐图像死点的问题后，div彼此重合的问题，现在div会自动采用20px的高度，而不是div背景图片的高度

5 个答案:

答案 0 :(得分：1)

在下面，您可以使用最新的Bootstrap和其他样式来找到所需的效果。请注意，这也可以通过正确的标题，图像链接和引导程序类来纠正代码示例中的不一致之处。

我已将样式内联，但是如果需要，您可以将其移动到单独的文件中。

将容器设置为视图高度的100％，以使大图像（包含行）垂直居中。 较小的图像是通过calc函数垂直对齐的，在该函数中，我们将图像放置在距顶部绝对高度50％减去图像高度的一半的位置（如果在下面添加@media ref，则必须考虑这一点）。

请注意，这两个图像都具有响应性，但是由于较小的图像在调整大小之前会保持其原始尺寸更长的时间，因此看起来比较小设备上的背景图像大。 您可以使用@media规则或更高级的CSS进行更改，但这不在您的问题范围内。

（考虑使用Ng-Sek-Long建议的背景图片代替

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>Centered images</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      </head>
      <body>
        <!-- Welcome area -->
        <div class="container-fluid d-flex justify-content-center align-items-center" style="min-height: 100vh;">
          <div class="row">
            <div class="col-xs-12" style="position: relative;">
              <img src="https://www.gruberreisen.at/fileadmin/redakteure/Website/slider/Header_Startseite1.jpg" class="img-fluid" />
              <div style="position: absolute; left: 0; top: calc(50% - 132px); width: 100%; text-align: center;">
                <img src="http://placehold.it/269x265/ccc.jpg" class="img-fluid" />
              </div>
            </div>
          </div>
        </div>
      </body>
    </html>

答案 1 :(得分：0)

有关示例，请参见下面的代码段：

.container {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 350px;
  height: 250px;
}

.img-responsive {
  box-sizing: border-box;
  width: 350px;
  height: 250px;
  border-radius: @field-border-radius;
}

.overlay {
  position: absolute;
  top: 25%;
  left: 25%;
}

.icon {
  width: 175px;
  height: 125px;
  object-fit: fill;
}
<!-- Welcome Area -->
<div class="container-fluid p-0">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 container">
      <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" class="img-responsive img-fluid" />
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center overlay">
        <img src="https://via.placeholder.com/175x125" class="img-responsive img-fluid icon" />
      </div>
    </div>
  </div>
</div>
<!-- End Welcome Area -->

答案 2 :(得分：0)

如果您希望将div和img都居中对齐，则可以将text-center添加到父元素，也可以将text-left左边对齐正确的text-right。但是由于您的col中有引导程序div，所以在设置right或left时将具有填充。您需要根据对齐方式写padding-left:0或padding-right:0。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Welcome Area -->
<div class="container-fluid p-0">
  <div class="row">
    <div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center">
      <img src="https://source.unsplash.com/300x300" class="img-responsive img-fluid" />
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
        <img src="https://source.unsplash.com/300x300?x" class="img-responsive img-fluid" style="z-index: auto;" />
      </div>
    </div>
  </div>
</div>

如果您希望它们保持相邻的一侧，则需要像这样更改HTML DOM。 col-**-12代表width:100%。如果您希望您的孩子旁边一个孩子，请给每个孩子50％的宽度。因此，您需要将其更改为col-**-6才能得到50％的宽度。根据逻辑，现在您的父级是row，它有2个div元素是子元素，而col-**-6代表都。并且在其中有img。如果您觉得不需要填充，则可以将padding: 0 !important; margin: 0 !important;添加到类为col-**

的元素上 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Welcome Area -->
<div class="container-fluid p-0">
  <div class="row">
      <div class=" col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 parent">
        <img src="https://source.unsplash.com/300x300" class="img-responsive img-fluid" />
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6 ">
        <img src="https://source.unsplash.com/300x300?x" class="img-responsive img-fluid" style="z-index: auto;" />
      </div>
  </div>
</div>

为了将img保留在较大的img中，您需要将元素设置为position:absolute，这会使html无法识别您的元素。现在，您可以根据需要定位它。

.parent {
  position: relative;
}

.parent>img {
  height: 530px;
  width: 1820px;
  object-fit: cover;
}

.inner-child {
  position: absolute !important;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

.inner-child>img {
  height: 269px;
  width: 259px;
  box-shadow: 0 0 5px 3px black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- Welcome Area -->
<div class="container-fluid p-0">
  <div class="row">
    <div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 parent">
      <img src="https://source.unsplash.com/300x300" class="img-responsive img-fluid" />
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 inner-child">
        <img src="https://source.unsplash.com/300x300?x" class="img-responsive img-fluid" style="z-index: auto;" />
      </div>
    </div>
  </div>
</div>

答案 3 :(得分：0)

根据您的评论：

  

父div中的图片1将为1820px X 530px（或更宽），图片2-内部div内为269px X 259px，

似乎就是您想要的，一个简单的CSS比尝试使用引导程序完成工作要好得多。

.outter-div {
  width: 1820px;
  height: 530px;
  background-image: url("https://source.unsplash.com/collection/190727/1820x530");
}
.inner-img {
  position: relative;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
    <div class="outter-div">
        <img class="inner-img" src="https://source.unsplash.com/collection/190727/269x259">
    </div>

答案 4 :(得分：0)

您只需要使用：

<div id="nav">
  <div id="one">One One One</div>
  <div id="two">Two</div>
</div>
<div id="centered">Two</div>

其余的定位可以通过Bootstrap类完成。

.v-center {
    top:50%;
    left:0;
    right:0;
    transform: translateY(-50%);
}

演示： https://www.codeply.com/go/umBZgxLzEN

注意：请确保您follow the Bootstrap docs。 <div class="container-fluid"> <div class="row no-gutters mvh-100 align-items-center"> <div class="col-12"> <img src="http://placehold.it/1860x530" class="img-fluid"> <div class="text-center position-absolute v-center"> <img src="http://placehold.it/269x265/444" class="img-fluid" style="z-index: auto;"> </div> </div> </div> </div> 前缀不再存在，并且不应直接在其他-xs中出现col。

相关问题
最新问题