Question

我的下一个代码有问题：

<!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>

这里的问题是“一些标题”和“一些文字”块显示在绿色圆圈的中心下方。而且这些块甚至不在<div id="some_id">内。我该如何解决？如果我可以将这些div垂直对齐到主div的中间，那将是很棒的。但至少我希望他们找到那个div的内部。我可以这样做：

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

但它看起来似乎不对，因为我仍然无法理解为什么他们不在主要的div。

Answer 1

默认情况下vertical-align是baseline作为参考文字的基础。只需更改该属性：

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

选中 DemoFiddle

Answer 2

由于您的3个子广告素材已设置为display: inline-block，因此其默认vertical-align属性设置为baseline，这就是为什么它们不是垂直对齐的原因。您需要将vertical-align: middle添加到您的所有3个子节点中：

.text, .title, .circle {
    vertical-align: middle;
}

<强> jsFiddle Demo

＆＃13;

.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;
}
.text,
.title,
.circle {
  vertical-align: middle;
}

＆＃13;

<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>

＆＃13;

垂直对齐的误解

2 个答案: