如何将图像与名称对齐？答案

【问题标题】：How to align image with name?如何将图像与名称对齐？
【发布时间】：2012-05-01 09:43:43
【问题描述】：

请参阅下面的代码。我正在尝试将名称与图像对齐，以使名称位于图像的右侧。我一直无法正确地做到这一点。我尝试添加 position: absolute;但这仍然无法解决问题。

    <div id="contain">
    <div id="baseline">

    <div id="title2">

    <img src="http://www.marketingjava.com/wp-content/uploads/2012/01/
    new-default-twitter-avatar.jpg" id="prof_image">Ariel Smith</div>
    </div>

    CSS:

    #contain {
    width: 770px;
    min-height: 170px;    
    margin: 20px auto 60px auto;
    color: #222222;
    font-size: 15px;    
    position: relative;
    }
    #baseline {
    color: #999;
    }

    #title2 {
    color: #000;
    font-size: 30px;
    margin-left: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 750px;
    }

【问题讨论】：

标签： css image alignment

【解决方案1】：

向左浮动并用边距调整标题以使其居中。

http://jsfiddle.net/FBj3f/

【讨论】：

第一次看到这种 jsfiddle 方式并喜欢它

【解决方案2】：

如果您知道图像的高度，您可以设置标题的行高，从而得到垂直居中的标题http://jsfiddle.net/BtPwh/1/

如果您不反对使用表格，那么您可以自动（不需要图像高度。）这样做：http://jsfiddle.net/tLggp/1/

【讨论】：

【解决方案3】：

最简单的方法是设置使用背景图像而不是图像元素。然后，您可以右对齐该块中的文本，从而获得右上角的定位。

【讨论】：