gpt4 book ai didi

html - 垂直对齐误解

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

下一个代码有问题:

<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 16px;
height: 16px;
border-radius: 50%;
border: 1px solid black;
}

.circle.red {
background-color: red;
}

.circle.green {
background-color: green;
}

.circle.blue {
background-color: blue;
}

.some_class {
height: 24px;
width: 320px;
border: 1px solid black;
background: yellow;
}

.some_class div {
display: inline-block;
background-color: aqua;
}

.some_class .circle {
margin: 3px 3px 3px 3px;;
}

.some_class .title {
background-color: blueviolet;
}
</style>
</head>
<body>
<div id="some_id" class="some_class">
<div class="circle green">

</div>
<div class="title">
Some title
</div>
<div class="text">
Some text
</div>
</div>
</body>
</html>

这里的问题是“一些标题”和“一些文本” block 显示在绿色圆圈中心的下方。此外,这些 block 甚至不在 <div id="some_id"> 内。 .我该如何解决?如果我可以将这些 div 垂直对齐到主 div 的中间,那就太好了。但至少我希望它们位于该 div 的内部。我可以这样做:

.some_class .title {
background-color: blueviolet;
position: relative;
top: -7px;
}

但这似乎不对,因为我仍然不明白为什么它们不在主 div 中。

最佳答案

对于默认的vertical-alignbaseline 作为引用的文本的基础。只需更改该属性:

.some_class div {
display: inline-block;
vertical-align:middle; /*ADD THIS LINE*/
background-color: aqua;
}

检查这个 DemoFiddle

关于html - 垂直对齐误解,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26630140/

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