2

我正在尝试将图像和一些文本垂直居中在单个 div 的中间（例如网页顶部的徽标和站点名称）。图像将在左侧，周围有一些填充，文本将在图像旁边，并且垂直居中位于 div 中。

这张图片显示了结果：

在此处输入图像描述

我尝试了许多来自互联网的代码，但无法让它工作。任何帮助将不胜感激。谢谢！

4

4 回答 4

1

添加vertical-align: middle到您的图像。这是一个jsfiddle示例。

于 2012-08-16T13:42:46.573 回答
0

只是对João 回答的一个小补充（不能发表评论）：

当您使用<h1>标签时，您应该在标签中添加以下内容<h1>：

display: inline;
vertical-align: middle;

现场演示：jsFiddle

多行兼容：jsFiddle *添加*

仅添加display: inline-block;不会正确定位文本。

于 2012-08-16T14:12:14.837 回答
0

像这样的东西？

http://jsfiddle.net/gy22f/6/

我使用显示表格和表格单元来使垂直对齐正常工作。

于 2012-08-16T14:18:44.110 回答
-1

试试这个：它对我有用

<div style="border:1px solid black;">
            <table >
                <tr>
                    <td style="margin:10px 0px 10px 10px;border:1px solid black">
                        <img src="http://www.instablogsimages.com/images/2008/01/16/vw-logo-img-routan-van_5965.jpg" style="width:100px;height:100px;" alt=""/>
                    </td>
                    <td>
                        <div style="margin-top:auto;margin-bottom:auto;border:1px solid black;">
                            Some Text
                        </div>
                    </td>
                </tr>
            </table>
        </div>
于 2012-08-16T14:11:03.563 回答