gpt4 book ai didi

html - 在 flex 元素中水平居中 div

转载 作者:行者123 更新时间:2023-11-28 14:25:55 33 4
gpt4 key购买 nike

我有 3 个 flex 元素(每个元素都是一个 div)。每个 flex 元素包含一个图像、2 个段落标签和一个 div(用于按钮)。我试图将每个 flex 元素中的每个按钮水平居中。

我已经尝试在 flex 容器中设置 justify-content:center; 但这没有用。 (我不认为这就是我想要的,因为我只希望 div 水平居中)我还尝试将 margin: 0 auto; 设置为按钮。这些似乎都不起作用。目前,每个 flex 元素的宽度为 33%,所以我将内部 div 设置为 position: absolute;left: 16.5%;(容器宽度的一半).但这看起来不对。这是我得到的最接近的。关于如何使它看起来更好的任何想法?

HTML:

<section class="overview-section">
<h2>Overview</h2>

<div class="row">
<div class="box">
<img src="https://images.unsplash.com/photo-1550129460-d47c2040f9df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=282&q=80">
<p class="under-text">TITLE GOES HERE</p>
<p class="txt">adsf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf </p>
<div class="btn">Learn more</div>
</div>
<div class="box">
<img src="https://images.unsplash.com/photo-1550129460-d47c2040f9df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=282&q=80">
<p class="under-text">TITLE GOES HERE</p>
<p class="txt">adsf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
</p>
<div class="btn">Learn More</div>
</div>
<div class="box">
<img src="https://images.unsplash.com/photo-1550129460-d47c2040f9df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=282&q=80">
<p class="under-text">TITLE GOES HERE</p>
<p class="txt">adsf adsf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
</p>
<div class="btn">Learn more</div>
</div>
</div>

</section>

CSS:

@import url("https://fonts.googleapis.com/css?family=Oswald:300,400,500");
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");
@import url("https://fonts.googleapis.com/css?family=Staatliches");

.row {
display: flex;
margin: 0 -50px;
}

.box {
position: relative; /* button will be positioned relative to this container */
border: 2px solid blue;
width: 33%;
height: 450px;
margin: 0 50px;
}

.box img {
width: 100%;
height: 250px;
}

.under-text {
font-family: "Staatliches", cursive;
color: red;
text-align: center;
}

.txt {
padding-left: 20px;
}

.btn {
position: absolute;
left: 16.5%;
bottom: 0;

background-color: #4caf50;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #4caf50;
}



代码笔:https://codepen.io/anon/pen/rPqgVm

预期结果: flex 元素中的每个 div 应水平居中。

最佳答案

从中移除

.btn {
position: absolute;
left: 16.5%;
bottom: 0;
}

并加入

.box {
display: flex;
flex-direction: column;
align-items: center;
}

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

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