下一个代码有问题:
<!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-align 是baseline 作为引用的文本的基础。只需更改该属性:
.some_class div {
display: inline-block;
vertical-align:middle; /*ADD THIS LINE*/
background-color: aqua;
}
检查这个 DemoFiddle
关于html - 垂直对齐误解，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26630140/