Question

我想在顶部栏中显示个人资料图片和名称，就像SO一样。但图像和文字仍然分为两行。 HTML

<div>
    <img src="" alt="" width="24" height="24" class="picture">
</div>

<div>
    <span>name</span>
</div>

CSS

span {
    float: left;
    display:inline-block;
}
img {
    float: left;
    display:inline-block;
}
div {
    float: left;
    display:inline-block;
}

加了：
我是HTML和CSS的新手。我认为将元素属性显示为内联块可以使它们在一行中对齐。

Answer 1

尝试 CSS Flexbox 。这也可以帮助您使用一个CSS规则使您的内容垂直居中。像：

/* Wrapper div of name & image */
.holder {
  display: flex;
  align-items: center; /* Responsible for aligning the content in the center vertically */
}

请看下面的代码段：

＆＃13;

.holder {
  display: flex;
  align-items: center;
}

.name {
  padding-left: 5px;
}

img {
  border: 1px solid #555;
}

＆＃13;

<div class="holder">
  <img src="http://placehold.it/24x24" alt="" width="24" height="24" class="picture">
  <span class="name">Name</span>
</div>

＆＃13;

希望这有帮助！

Answer 2

＆＃13;

span {
    float: left;
    display:inline-block;
  margin-left:5px;
}
img {
    float: left;
    display:inline-block;
}

＆＃13;

<div>
    <img src="" alt="" width="24" height="24" class="picture">
</div>

<div>
    <span>name</span>
</div>

＆＃13;

Answer 3

给div设置宽度，然后它将是内联的。因此，如果你给他们50％，那么他们将出现在同一行。

Answer 4

某些浏览器不支持

inline-block属性。 Please see here.

在这种情况下，您只使用float属性。 CSS

span {
    float: left;
}
img {
    float: left;
}

HTML

<div>
    <img src="" alt="" width="24" height="24" class="picture">
    <span>name</span>
</div>

如何使<img/>和<div>在一行中对齐

4 个答案: