Question

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

此图像可视化结果：

我尝试了很多来自互联网的代码，但无法让它发挥作用。任何帮助将受到高度赞赏。谢谢！

Answer 1

将vertical-align: middle添加到您的图片中。这是一个jsfiddle例证。

Answer 2

只是João's answer的一小部分内容（无法发表评论）：

当您使用<h1>代码时，应将以下内容添加到<h1>代码中：

display: inline;
vertical-align: middle;

现场演示：jsFiddle

多行兼容：jsFiddle *已添加*

只需添加display: inline-block;，就无法正确定位文字。

Answer 3

这样的东西？

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

我用过display table＆amp; table-cell使垂直对齐正常工作。

Answer 4

试试这个：它对我有用

<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>

CSS：在div中垂直居中显示图像和文本

4 个答案: