Rumah > Artikel > hujung hadapan web > 可(兼容IE6+)水平垂直居中图片及文字的实例代码
可(兼容IE6+)水平垂直居中图片及文字的实例代码
- 高洛峰asal
- 2017-03-15 09:22:421320semak imbas
水平垂直居中图片及文字(兼容IE6+)实例
直接看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>水平垂直居中</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { margin: 0; padding: 0; font-size: 12px; color: #FFF; }
.container {
display: table; /*主要代码*/
*position: relative; /*for ie67*/
background-color: #FF5E53; width: 800px; height: 200px; overflow: hidden; margin: 0 auto;
}
.content {
vertical-align: middle; display: table-cell; text-align: center; /*主要代码*/
*position: absolute; *top: 50%; *left: 50%; /*for ie67*/
}
.center {
display: inline-block; /*主要代码*/
*display: inline; zoom: 1; *position: relative; *top: -50%; *left: -50%; /*for ie67*/
padding: 10px; border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div class="center">
<img src="https://static.cnblogs.com/images/adminlogo.gif" /><br/>
居中居中居中居中居中居中居中居中居中.....
</div>
</div>
</div>
</body>
</html>Atas ialah kandungan terperinci 可(兼容IE6+)水平垂直居中图片及文字的实例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：动态获取表格（固定表头）实现代码Artikel seterusnya：使用绝对定位实现横向两列布局代码