Question

我需要将图像和标题垂直对齐到中间。两者都需要一个绝对的左边距。

在过去的3个小时里，我试图达到这两个要求，但我只是将对象正确对齐或适当的边距。如何使图像和标题垂直对齐绝对边距？

这就是我的想法，但似乎我只能使用浮动或垂直对齐img。

.top {
    line-height: 50px;
}

.top img {
    margin-left: 15px;
    vertical-align: middle;
    float: left;
}

.top h1 {
    margin-left: 65px;
    vertical-align: middle;
    display: inline;
}

-

<div class="top">
    <img src="http://www.w3schools.com/images/compatible_chrome.gif" />
    <h1>Text aligned vertically with the image + absolute left margin</h1>
</div>

查看我的JSFiddle实验。

编辑：这是我想要实现的目标的图像。文本必须紧挨着图标（绝对边距，而不是相对），图标+文本需要垂直居中。 Absolute margin + vertically aligned

图像尺寸不是静态的，这就是我需要文本位置从左边缘绝对的原因。

Answer 1

您更正后的代码

<强> CSS

.top {
    line-height: 50px;
}

.top img {
    margin-left: 15px;
    vertical-align: middle;
}

.top h1 {
    margin-left: 65px;
    vertical-align: middle;
    display: inline-block;
}

Answer 2

使用此：

<强>的CSS：

.fragment {
border: 1px blue solid;
margin: 5px;}

.top {
background-color: #ccc;
width: 100%;}

.top img {
margin-left: 15px;
vertical-align: middle;}

.top h1 {
margin-left: 65px;
vertical-align: middle;
display: inline;}

.top2 {
background-color: #ccc;}

.top2 img {
float: left;
margin-left: 15px;
vertical-align: middle;}

.top2 h1 {
margin-left: 65px;
vertical-align: middle;}

<强> HTML

<div class="fragment">
<div class="top2">
    <table>
        <tr class="top">
            <td>
                <img src="http://www.w3schools.com/images/compatible_chrome.gif" />
            </td>
            <td>
                <h1>[X] Image and text aligned properly, [ ] 65px absolute margin-left</h1>
            </td>
        </tr>
        <tr class="top2">
            <td>
                <img src="http://www.w3schools.com/images/compatible_chrome.gif" />
           </td>
           <td>
               <h1>[ ] Image and text aligned properly, [X] 65px absolute margin-left</h1> </td>
        </tr>
    </table>
</div>
</div>

示例：http://jsfiddle.net/76ftL/7/

Answer 3

您可以按如下方式在图像上使用绝对定位。

<强> CSS

.fragment {
    border: 1px blue solid;
    margin: 5px;
}

.top {
    background-color: #ccc;
    width: 100%;
    position: relative;
    line-height:50px;
}

.top img {
    margin-left: 15px;
    position: absolute;
    top:50%;
    -webkit-transform:translateY(-50%); 
}

.top h1 {     
    vertical-align: middle;
    display: inline-block;
    margin-left: 65px;;
}

这是'魔术'部分

top:50%;
-webkit-transform:translateY(-50%);

首先，我们将图像放在包装纸的中间位置，然后将其平移至其高度的50％，无论高度是多少。

JSfiddle Demo

垂直对齐浮动img和h1与绝对边距左

3 个答案: