Question

我想将此图片与框中的文字对齐。盒子和图像的Css：

#msg_b {
    word-wrap: break-word;
    background:#fefefe;
    padding:5px;
    min-height:15px;
    margin-bottom:5px;
    position:relative;
    margin-left:30px;
    border-radius:5px;
    border: 1px solid #d5d5d5;
}
.avatar {
    width: 25px;
    height: 25px;
    vertical-align:middle;
}

结果，图像无法与框对齐。请帮忙！

Answer 1

你应该尝试创建一个div，并将你的文字和图像放在你提供的风格的同一个div中。

类似的东西：

    <div id="msg_b">Your text goes here
    <img src="YOUR_IMAGE_URL" class="avartar" />
    </div>

图像的位置可以从右向左添加

    float:left;

到图像的样式类。这对我有用。希望它有所帮助。

Answer 2

您必须将其位置保持在内联块或内联，然后设置垂直对齐！

img {
  max-width: 200px;
  vertical-align: middle;
  border: 1px solid black;
}

span {
  display: inline-block;
  vertical-align: middle;
  
  padding: 1em 2em;
  border: 1px solid black;
}

<div>
  <img src="https://pixabay.com/static/uploads/photo/2014/04/20/12/30/thumb-328420_640.jpg" /><span>Good Job</span>
</div>

Answer 3

尝试一下（将display:block添加到两个元素中）：

#msg_b{
    display: block;
    word-wrap: break-word;
    background:#fefefe;
    padding:5px;
    min-height:15px;
    margin-bottom:5px;
    position:relative;
    margin-left:30px;
    border-radius:5px;
    border: 1px solid #d5d5d5;
    vertical-align:middle;
}
.avatar {
    display: block;
    width: 25px;
    height: 25px;
    vertical-align:middle;

}

<强> DEMO HERE

将图像与CSS

3 个答案: