居中对齐(V & H)一个div和一个img在父div内?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了居中对齐(V & H)一个div和一个img在父div内?相关的知识,希望对你有一定的参考价值。

我想把一个图片和一个div(水平和垂直居中)在父div里面对齐,但我做不到,我已经尝试了2天。我使用的是bootstrap 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自动取20px的高度,而不是div背景图片的高度。

答案

下面你会发现,通过使用最新的Bootstrap和额外的样式,你会发现想要的效果。请注意,这也纠正了你在你的代码示例中的不一致,适当的标题,图像链接和bootstrap类。

我已经把样式放在了内联,但如果你想的话,你可以把这些移到一个单独的文件中。

容器设置为100%的视图高度,以使大图像(包含行)垂直居中.较小的图像是通过计算函数垂直对齐的,我们将图像50%减去图像高度的一半,绝对从顶部开始(如果你在下面添加@media ref,你必须考虑到这一点)。

请注意,这两张图片都是响应的,但由于较小的图片在调整大小之前会保持原来的尺寸更长,所以在较小的设备上看起来比背景图片更大.你可以使用@media规则或更高级的CSS来改变这一点,但这不在你的问题范围内。

(可以考虑像吴锡龙建议的那样用背景图来代替)

    <!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>
另一答案

请看下面的代码片段为例。

.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 -->
另一答案

如果你正在寻找对齐这两个 divimg 你可以在中间添加 text-center 到父元素,以及向左对齐,添加 text-left 而对于权利 text-right. 但由于你有bootstrap col 在你 div 当你设置 rightleft. 你需要写 padding-left:0padding-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>
另一答案

根据你的评论。

图片1在父div中的宽度是1820px X 530px(或更多) 图片2在div内部的宽度是269px X 259px。

看来这就是你想要的,一个简单的css会比试图用bootstrap来做这件事要好得多。

.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>
    
另一答案

你只需要使用。

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

剩下的定位可以用Bootstrap类来完成。

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

演示一下。 https:/www.codeply.comgoumBZgxLzEN

注意:请确保你 遵循Bootstrap文档. 该 -xs infix不存在,也就不应该有 col 直接在其他 col.

以上是关于居中对齐(V & H)一个div和一个img在父div内?的主要内容,如果未能解决你的问题,请参考以下文章

将多个 div 对齐一行并将文本垂直和水平居中

如何将一个设置为absolute的div居中对齐

CSS 布局 - 并排居中并对齐两个 div

css怎样让div里的表格居中对齐

怎样使div块居中对齐?

一个未知宽高的元素在div中垂直水平居中