Dreamweaver里怎么让div里的文字垂直居中?
如果垂直居中的元素高度已知,这个比较简单,也不需要额外的辅助元素
参考下列HTML代码:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="cache-control" content="no-cache" /> <style> <!-- html, body { height: 100%; margin: 0; padding: 0; } body { position: relative; } #div { background: blue; color: #fff; position: absolute; top: 50%; left: 50%; height: 240px; width: 240px; margin: -120px 0 0 -120px; } --></style> </head> <body> <div id="div"> i'm Mr. zzllrr. </div> </body> </html>
如果居中元素高度可变,这就需要额外的一个wrapper元素,用table-cell的方式来模拟表格的居中实现
具体请参考下列代码:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="cache-control" content="no-cache" />
<style>
<!--
html, body {
height: 100%;
margin: 0 auto;
padding: 0;
}
body {
position: relative;
display: table;
}
#wrapper {
display: table-cell;
vertical-align: middle;
text-align: middle;
}
#div {
background: blue;
color: #fff;
}
* html #wrapper, *+html #wrapper {
position: absolute;
top: 50%;
}
* html #div, *+html #div {
position: relative;
top: -50%;
}
--></style>
</head>
<body>
<div id="wrapper">
<div id="div">
i'm Mr. zzllrr.
i'm Mr. zzllrr.
i'm Mr. zzllrr.
</div>
</div>
</body>
</html>
还有就是dw里,那个居中命令 ctrl +alt +shift +c 能想到的就这些
center只有水平居中
哦,试一下这个 vertical-align: middle;