居中对齐(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>

给TA打赏
共{{data.count}}人
人已打赏
解决方案

在尝试启动React后出现错误(可能是项目依赖树有问题......)。

2022-4-21 3:00:11

解决方案

获取VS代码Python扩展以连接到远程AWS EMR主节点上运行的Jupyter。

2022-4-21 3:00:13

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索