Question

<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;">
    <img src="" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;">
    <div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div>
</div>

我发现img和#here的底线不在一条线上，如果我向#here添加任何文字，谁能告诉我原因。如何在外面制作#here和img verticall中心（img和#here在同一行）

Answer 1

vertical-align正是您要找的。

＆＃13;

.outside > * {
  vertical-align: middle;
}

＆＃13;

<div class="outside" style="width: 500px; height: 20px; border: 1px solid red;">
  <img src="http://www.fillmurray.com/20/10" style="width: 10px; height: 20px; margin: 0; padding: 0; display: inline-block;">
  <div id="here" style="display: inline-block; height: 15px; border: 1px solid blue; font-size: 7px;">11</div>
</div>

＆＃13;

Answer 2

你想要它在水平中心吗？

＆＃13;

#ImageCtr {
    width: 10px;
    height: 20px;
    
}
#outer {
  width: 500px;
  height: 20px;
  background-color: #FF0000;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div id="outer">
    <div id="ImageCtr"><img src="http://i.imgur.com/vCVDBHB.png">
    </div>
</div>

＆＃13;

使div和图像在div内垂直对齐

2 个答案: