![](/img/trans.png)
[英]Absolute center horizontal and vertical a div with fluid width and height?
[英]Center DIV content Fluid Vertical and Horizontal
這是我的示例:
線高不適用於流體div。 我目前使用的代碼基於行高,但是框的大小會發生變化。 那么,如何始終將鏈接(內容)始終放置在中間位置?
我要確保此DIV中的內容始終始終從頂部和側面居中。 垂直和水平居中。
當前代碼:(注釋樣式標記為空,因為它是動態填充的)
<style type="text/css">
.box{
width:468px; /* php changes this sometimes */
height:60px; /* php changes this sometimes */
background:#eee;
text-align:
center;
border:
1px solid rgb(177, 172, 171);
line-height: 61px;
}
</style>
<div style="" class="box" id="">
<a style="color:#333;font-weight:bold" href="claimPrize();">Winner!</a>
</div>
不久前遇到了類似情況,進行了搜索,找到了一篇有關css-tricks絕對居中的文章, 這是該文章及其附帶的小提琴來進行測試。
的CSS
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
的HTML
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="centered">
<h1>Some text</h1>
<p>But he stole up to us again, and suddenly clapping his hand on my shoulder, said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
</div>
</div>
演示版
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.