将图像与文本对齐，不降低文本

Question

所以我有一个“帖子”框，那将包含一个头像和帖子。问题是，当我添加图像时，文本会下降到图像下方。这就是我所说的

我想要做的就是将图片与文字对齐。这是我的图像代码

cursor: default;
height: 74px;
width: 74px;
border-radius: 50% 50% 50% 50%;
margin-right: 19px;
vertical-align: middle;
margin-top: -19px;
display: inline-block;

here's一个演示。它不是最完整的演示，但它的工作原理。你能帮忙的话，我会很高兴。我正在尝试将文本与图像对齐

Answer 1

使用css：

float:left;

这是一个JSFIddle：http://jsfiddle.net/UWtEF/

希望有所帮助

Answer 2

您可以将图像浮动到左侧。

img { 
    float: left;
}

Have a fiddle!

或者你可以绝对定位（可能更合适）。

.post {
    position: relative; /*Make absolutely positioned children relative to their .post parents */
}

.post img { 
    position: absolute;
    top: 50%;
    margin-top: -37px; /* negative. half of height/*
}

这会将您的图片保留在帖子的中心。

Have a second fiddle!

Answer 3

我看到了你的代码，如果我理解你的问题，你想在avatar的右侧对齐文本。 实际上你知道头像大小然后最简单的解决方案是首先创建位置的上下文，然后：

.post{position:relative;/* your other properties here */}

现在你有了一个上下文，你可以为你的头像添加绝对值：

#IMG_1{position:absolute;left:0;top:0;/* your other properties here, don't forget to remove margins */}
/* I suggest you to replace #IMG_1 by .post > img{} */

现在你只需要在你的块内容中添加padding-left for post：

.post{padding-left:84px;/* your other properties here and don't forget position:relative; */}

现在你只需要纠正其他选择器，比如.message，.likes，.time来删除填充（在.post中填充左边就足够了。）

我希望这对你有所帮助。