居中对齐(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 -->另一答案
如果你正在寻找对齐这两个 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>另一答案
根据你的评论。
图片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内？的主要内容，如果未能解决你的问题，请参考以下文章