如何显示年龄中间的文本和页面左侧的图像

Question

我有以下标记

<img  style="float: left;" src="c:\1.png"> <h1 style="float: center;">ttt</h1>

我得到了这个结果： -

但是我需要h1位于页面的中间，并且还需要在图片的中间水平对齐，有人可以建议吗？ 感谢

Answer 1

CSS中没有float: center;。相反，您应该使用text-align: center;或margin: 0px auto;。另外，我建议您使用CSS文件或至少分离文档中的代码，这样您就可以整理html代码并使其更易于维护。要水平对齐，您可以使用vertical-align: middle：Link to a sample。或者给它一个margin-top: 50%;

Answer 2

DEMO

div {
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

img{
 width:150px;
 height:150px;
 background:red
}

<div>
    <img src="c:\1.png" /> <h1>ttt</h1>
</div>