三、如果是多行文本，父容器固定高度。
這就需要用到定位，而且需要給Html增加標簽。我們不提倡這樣做。
但目前這個方法可以更好的解決問題。
在容器的內部需要增設兩個容器，來實現這樣的效果。
MrJin、MrJin_a和MrJin_b的設置分別如下：
ExampleSourceCode
- #MrJin{
- position:static;
- *position:relative;
- height:300px;
- width:500px;
- border:1pxsolid#03c;
- *display:block!important;
- display:table!important;
- }
- #MrJin_a{
- position:static;
- *position:absolute;
- display:table-cell;
- vertical-align:middle;
- *display:block;
- top:50%;
- width:100%;
- }
- #MrJin_b{
- position:relative;
- top:-50%;
- text-align:center;
- width:100%;
- }
這樣設置以後，不管容器內的文本是一行，還是多行，都將會實現垂直居中對齊。
SourceCodetoRun
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHtml1.0Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xHtml1-strict.dtd">
- <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/Html;charset=utf-8"/>
- <title>div-CSS.Net</title>
- <styletypestyletype="text/CSS">
- #MrJin{
- position:static;
- *position:relative;
- height:300px;
- width:500px;
- border:1pxsolid#03c;
- *display:block!important;
- display:table!important;
- }
- #MrJin_a{
- position:static;
- *position:absolute;
- display:table-cell;
- vertical-align:middle;
- *display:block;
- top:50%;
- width:100%;
- }
- #MrJin_b{
- position:relative;
- top:-50%;
- text-align:center;
- width:100%;
- }
- </style>
- </head>
- <body>
- <dividdivid="MrJin">
- <dividdivid="MrJin_a">
- <dividdivid="MrJin_b">
- CSSWebDesign-div-CSS.Net
- </div>
- </div>
- </div>
- </body>
- </Html>
[可先修改部分代碼再運行查看效果]
文章來源:Div-Css.net設計網參考:http://www.div-CSS.Net/div_CSS/topic/index.ASP?id=10091
【編輯推薦】