这是我的例子:
线高不适用于流体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的绝对居中的文章,here是文章和随之而来的测试它的小提琴.
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,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,said—"Did ye see anything looking like men going towards that ship a while ago?"</p>
- </div>
- </div>
演示