gpt4 book ai didi

html - flex 元素不垂直居中

转载 作者:行者123 更新时间:2023-11-28 04:47:09 26 4
gpt4 key购买 nike

我尝试使用 flexbox 将内容垂直居中,但没有成功。我不喜欢使用 positiontranslate 因为它不是固定大小。我的代码有什么问题?

.row-centered {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.col-centered {
display: flex;
flex-direction: column;
align-self: flex-start;
float: none;
margin-right: 0 auto;
}

.us-container{
display: flex;
justify-content: center;
align-items: center;
vertical-align: middle;
resize: both;
overflow: auto;
}

.us-container div{
resize: both;
overflow: auto;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<section id="us" class="container-fluid">
<div class="row row-centered us-container">
<div class="col-sm-8 col-md-8 col-xs-8 col-centered ">
<p class="text-justify">blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah </p>
<h3 class="text-center">blah blah blah</h3>
</div>
</div>
</section>

最佳答案

你的 flex 容器没有额外的高度。唯一的高度是内容的高度。因此,没有垂直居中的空间。

第一步,增加一些高度:

.row-centered {  
display: flex;
height: 100vh;
}

第二步,删除不必要的规则,其中一些规则会阻止垂直对齐。

.col-centered {
display: flex;
flex-direction: column;
/* align-self: flex-start;
float: none;
margin-right: 0 auto; */
}

.row-centered {
display: flex;
height: 100vh;
}
.col-centered {
display: flex;
flex-direction: column;
}
.us-container {
display: flex;
justify-content: center;
align-items: center;

}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section id="us" class="container-fluid">
<div class="row row-centered us-container">
<div class="col-sm-8 col-md-8 col-xs-8 col-centered ">
<p class="text-justify">blah blah blah blah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah
blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blahblah blah blah</p>
<h3 class="text-center">blah blah blah</h3>
</div>
</div>
</section>

关于html - flex 元素不垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41863867/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com