gpt4 book ai didi

css - 在同一行的标题内垂直 div

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

在我不断尝试之后,我做了一些调整,使我可以让 div 与 h3 在同一行上,但它没有居中。我只是想让 div 在同一行,在 h3 旁边,垂直居中的 h3 文本(或者 div,只要文本出现就没关系。

我猜 position: absolute; 是个问题,但如果我删除它,数字周围的圆圈将不再是一个圆圈(我需要保持它是一个圆圈) 就像现在一样,圆圈将位于同一行,但如果标题文本在页面上有足够的空间(一行),它会垂直对齐顶部 enter image description here

或底部,如果标题文本分两行(由于太长) enter image description here

并且还在圆圈和文本之间水平添加 10px。

我使用这个 html:

 <h3> <div class="numberCircle">
<div class="content">24</div> </div>Smallest Personal Computer - Micro Mote </h3>

和这个 CSS:

 .numberCircle {
border-radius: 50%;
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
width: 50px;
padding: 8px;
font-size: 32px;
line-height: 1em;
border: 2px solid #666;
position: relative;

}
.numberCircle:before{
content:"";
display:block;
margin-top:100%;
}
.numberCircle .content {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
}

对于 h3:

 h3 {
line-height: 1.17391em;
color: #242d36;
font-family: "PT Serif", Georgia, Times, serif;
font-size: 23px;
margin: 27px 0;
display: flex;
align-items: center;
justify-content: center;
vertical-align:middle;
}

最佳答案

你可以很容易地实现它,稍微改变你的 HTML 并将 flexbox 移动到包装器。

 .numberCircle {
border-radius: 50%;
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.2);
width: 50px;
padding: 8px;
font-size: 32px;
line-height: 1em;
border: 2px solid #666;
position: relative;

}
.numberCircle:before{
content:"";
display:block;
margin-top:100%;
}
.numberCircle .content {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
}
h3 {
line-height: 1.17391em;
color: #242d36;
font-family: "PT Serif", Georgia, Times, serif;
font-size: 23px;
margin: 27px 0;
vertical-align:middle;
}
.wrapper{
display: flex;
align-items: center;
justify-content: center;
}
<div class="wrapper">
<div class="numberCircle">
<div class="content">24</div>
</div>
<h3>Smallest Personal Computer - Micro Mote </h3>
</div>

关于css - 在同一行的标题内垂直 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40634848/

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