html - 父级中的HTML div中心对齐不起作用
问题描述
我有以下 HTML/CSS/JS:
<div class="container">
<div class="full-width">
<iframe class="video-iframe fullsize" src="yyy" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<a href="#section2">
<span class="dot">
<i class="arrow-down"></i>
</span>
</a>
</div>
<div class="half-width" id="section2">
<div class="half-width-content">
<div class="half-width-text">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr
um. Stet clita kasd gubergren, no sea takimata sanctus est</p>
<p>akimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="half-width">
<div class="half-width-content">
<div class="instagram-slideshow">
<img class="slide" src="http://placekitten.com/200/300">
<img class="slide" src="https://placeimg.com/640/480/animals">
<img class="slide" src="http://placekitten.com/200/300">
</div>
</div>
</div>
<div class="half-width">
div 3
</div>
<div class="half-width">
div 4
</div>
</div>
CSS:
body {
margin:0;
}
.container {
display:flex;
flex-wrap:wrap;
flex-direction:row;
height:100vh;
}
.container > div {
min-height: 100vh;
border:1px solid black;
box-sizing:border-box;
}
.container > div > a > .dot{
position: relative;
transition: background .2s linear;
left: 50%;
bottom: 10%;
z-index: 101;
height: 25px;
width: 25px;
background-color: white;
border-radius: 50%;
display: inline-block;
}
.container > div > a > .dot > .arrow-down {
transition: border .2s linear;
position: absolute;
top:11%;
left: 24%;
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 5px;
}
.container > div > a .dot:hover{
background: black;
}
.container > div > a .dot:hover > .arrow-down{
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 5px;
}
.container > div > a > .dot > .arrow-down{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.container > div .content{
height: 100vh;
width: 100vw;
}
.full-width {
width:100%;
}
.half-width {
width:50%;
}
div > .content{
background: green;
}
.video-iframe.fullsize{
height: 100%;
width: 100%;
}
.list{
list-style: none;
text-align: center;
}
.half-width > .half-width-content{
height: 100%;
width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow{
position: relative;
height: 100%;
width: 100%;
}
.half-width > .half-width-content > .instagram-slideshow > img{
position: absolute;
width: 100%;
height: 100%;
}
.half-width > .half-width-content > .half-width-text{
position: abolute;
margin: auto auto;
height: 75%;
width: 75%;
background: red;
}
JS(使用 jQuery):
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
我试图让 divhalf-width-text
与所有四个方向的相同边距对齐,因此它的中心宽度和高度为其父级的 75%。首选的解决方案就像我尝试使用 margin auto 来获得响应行为一样。
我已经尝试将 flex 与方向行一起使用。
有人能帮我吗?
解决方案
请为“.half-width-text”类试试这个:-
.half-width > .half-width-content > .half-width-text{
position: relative;
margin: auto auto;
height: 75%;
width: 75%;
background: red;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
推荐阅读
- ios - iOS 通知中心消息分组之类的列表
- django - 如何在 Django Tastypie 中包装自定义端点?
- node.js - 生态系统.config.js 中的自定义 npm 脚本
- python - 带有成绩单数据的正则表达式 (Theathre)
- url - 检查 API 创建新的检查运行不能设置“details_url”
- python - Boto3:describe_auto_scaling_groups 在输入中给出未知参数:“过滤器”错误
- excel - 如何在 MS excel 中导出带有 .xlam 文件的自定义功能区
- python - 在 pandas DataFrame 中将多列转置为 1 列
- regex - 使用 regex + index 搜索不以特定前缀开头的字符串
- c# - 获取与特定字符串模式匹配的项目列表