Question

.roles span {
  display:inline-block;
  width:80px;
}

<div class="roles">
  <img alt="test" src="images/02_button_add.png">
  <span>AlexAlexAl exAlexAlex AlexAlexAlex </span>
</div>

我正在使用display:inline-block;将span文字放在我的img旁边。但是，图像位于我的跨度的左下方。

如何让它们水平？

Answer 1

对图像使用vertical-align：top。

.roles img
{
    vertical-align:top;
}

看看这个小提琴：http://jsfiddle.net/gox5droc/

这将确保图像在div顶部对齐。

Answer 2

＆＃13;

.roles span {
  width:80px;
display: table;
}

img {
vertical-align: middle;}

＆＃13;

<div class="roles">
  <div style="display: table-cell; vertical-align: middle;"><img alt="test" src="images/02_button_add.png"></div>
  <div style="display: table-cell;"><span>AlexAlexAl exAlexAlex AlexAlexAlex </span></div>
</div>

＆＃13;

Answer 3

垂直将width添加到image代码。

＆＃13;

.roles span {
  display:inline-block;
  width:80px;
}

＆＃13;

<div class="roles">
  <img alt="test" src="images/02_button_add.png" style="width:100%">
  <span>AlexAlexAl exAlexAlex AlexAlexAlex </span>
</div>

＆＃13;

水平将vertical-align添加到span标记。

＆＃13;

.roles span {
  display:inline-block;
  vertical-align:top;
  width:80px;
}

＆＃13;

<div class="roles">
  <img alt="test" src="images/02_button_add.png">
  <span>AlexAlexAl exAlexAlex AlexAlexAlex </span>
</div>

＆＃13;

Answer 4

将float:left设置为img和span，并将宽度添加到img

.roles img {
  display:inline-block;
  width:80px;
  float: left;
}

.roles span {
  display:inline-block;
  width:80px;
  float: left;
}

<div class="roles">
  <img alt="test" src="images/02_button_add.png">
  <span>AlexAlexAl exAlexAlex AlexAlexAlex </span>
</div>

使用内联块时如何使两个块水平？

4 个答案: