Question

我尝试了vertical-align属性，但未能将span与中间对齐：

.foo {
 width: 500px;
 height: 50px;
 background-color: powderblue;
 display: inline-block;
}

.img {
  width: 50px;
  height: 50px;
}

.bar {
  vertical-align: middle;
}

<div class="foo">
  <img class="img" src="http://dmrctt.com/wp-content/uploads/2012/10/Address-FTN-Image_1322320725.jpg" alt="">
  <span class="bar"> Lorem ipsum dolor sit amet </span>
</div>

我也尝试使用display: inline-block，并期望我现在可以在span的中间对齐div。为什么这不起作用？

Answer 1

内联元素的默认veritcal对齐方式是基线。所以把它改成适合你需要的东西，比如中间。

.foo {
  width: 500px;
  height: 50px;
  background-color: powderblue;
  display: inline-block;
}

.img {
  width: 50px;
  height: 50px;
  vertical-align: middle;
}

.bar {
  vertical-align: center;
}

<div class="foo">
  <img class="img" src="http://dmrctt.com/wp-content/uploads/2012/10/Address-FTN-Image_1322320725.jpg" alt="">
  <span class="bar"> Lorem ipsum dolor sit amet </span>
</div>

Answer 2

＆＃34;中心＆＃34;对于vertical-align，它不是有效值，我认为你的意思是＆＃34; middle＆＃34;。

https://developer.mozilla.org/es/docs/Web/CSS/vertical-align

另外，显示：inline-block对你没有任何作用，因为它应该在子元素上（如果有的话），而不是容器。

你需要解决这个问题的方法是在img上使用vertical-align：middle。

＆＃13;

.foo {
 width: 500px;
 height: 50px;
 background-color: powderblue;
}

.img {
  width: 50px;
  height: 50px;
  vertical-align:middle;
}

＆＃13;

<div class="foo">
  <img class="img" src="http://dmrctt.com/wp-content/uploads/2012/10/Address-FTN-Image_1322320725.jpg" alt="">
  <span class="bar"> Lorem ipsum dolor sit amet </span>
</div>

＆＃13;

display：inline-block，span未正确对齐

2 个答案: