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

问题描述 投票：-1回答：5

我想把一个图片和一个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背景图片的高度。

html css bootstrap-4
5个回答
1
投票

下面你会发现，通过使用最新的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>
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 -->
0
投票

如果你正在寻找对齐这两个 div 和 img 你可以在中间添加 text-center 到父元素，以及向左对齐，添加 text-left 而对于权利 text-right. 但由于你有bootstrap 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 根据这个逻辑，现在你的父代是行，它有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>

为了让你的图片在大图片里面，你需要将元素设置为 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>
0
投票

根据你的评论。

图片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>
0
投票

你只需要使用。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.