图片文字垂直居中
程序员文章站
2024-03-14 10:27:34
...
1.1 图片文字垂直居中
方法1： 通过设置父元素table，子元素table-cell和vertical-align 、vertical-align:middle的意思是把元素放在父元素的中部
<div>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
<span>Norwegian Mountain Trip</span>
</div>
<style>
div{
display: table;
}
span{
display: table-cell;
vertical-align: middle;
}
</style>
方法2：
<div>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
<span>Norwegian Mountain Trip</span>
</div>
<style>
div{
line-height: 228px;
}
img{
vertical-align: middle;
}
span{
vertical-align: middle;
}
</style>
方法3：
<html>
<head>
<style type="text/css">
img.top {vertical-align:middle}
</style>
</head>
<body>
<p>
<img class="top" border="0" src="/i/eg_cute.gif" />位于段落中的图像。
</p>
</body>
</html>
推荐阅读