将浮动的 img 和 h1 与绝对左侧边距垂直对齐答案

【问题标题】：Vertically align a floating img and h1 with absolute margin-left将浮动的 img 和 h1 与绝对左侧边距垂直对齐
【发布时间】：2014-07-19 01:13:38
【问题描述】：

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

在过去的 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 实验。

编辑：这是我要实现的目标的图像。文本必须在图标旁边（绝对边距，而不是相对），并且图标 + 文本需要垂直居中。

图像大小不是静态的，这就是为什么我需要文本位置从左边缘绝对。

【问题讨论】：

你需要解释最终结果是什么。就像您想在图像上放置文本还是在图像旁边放置文本或什么......也许是一个图像来向我们展示您想要的结果。那么我们可以更好地回答这个问题。
你想要这个吗？ jsfiddle.net/76ftL/6 当您想使用 vertical-align 时，删除浮动并使用 display:inline-block 用于 h1 和 img。我将把它留在这里：w3fools.com
您为什么不考虑将position 和top 属性与边距结合使用？
编辑了问题。 Tyblitz：我不想要静态的top，因为图像大小可能会有所不同。我已经尝试过绝对的position，但这搞砸了垂直对齐。

标签： html css

【解决方案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;
}

【讨论】：

【解决方案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/

【讨论】：

呃...用于布局的表格。请不要推荐。表格用于表格数据..这不是。
我确实考虑过表格（作为最后的手段），但后来意识到我不能对带有表格的文本使用绝对位置。感谢您的回答！

【解决方案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

【讨论】：