html – 中心DIV内容流体垂直和水平

前端之家收集整理的这篇文章主要介绍了html – 中心DIV内容流体垂直和水平前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我的例子:

线高不适用于流体div.我的代码目前基于行高,但框的大小会发生变化.那么如何才能在完全中间的链接(内容)?

我想确保这个DIV中的内容总是从顶部和侧面同样居中.垂直和水平居中.

当前代码:(注意样式标记为空白,因为这是动态填充的)

  1. <style type="text/css">
  2. .Box{
  3. width:468px; /* PHP changes this sometimes */
  4. height:60px; /* PHP changes this sometimes */
  5. background:#eee;
  6. text-align:
  7. center;
  8. border:
  9. 1px solid rgb(177,172,171);
  10. line-height: 61px;
  11. }
  12. </style>
  13.  
  14. <div style="" class="Box" id="">
  15. <a style="color:#333;font-weight:bold" href="claimPrize();">Winner!</a>
  16. </div>

解决方法

不久前进入类似的情况,做了一个搜索,发现了一篇关于css-tricks的绝对居中的文章,here文章和随之而来的测试它的小提琴.

CSS

  1. /* This parent can be any width and height */
  2. .block {
  3. text-align: center;
  4. }
  5.  
  6. /* The ghost,nudged to maintain perfect centering */
  7. .block:before {
  8. content: '';
  9. display: inline-block;
  10. height: 100%;
  11. vertical-align: middle;
  12. margin-right: -0.25em; /* Adjusts for spacing */
  13. }
  14.  
  15. /* The element to be centered,can
  16. also be of any width and height */
  17. .centered {
  18. display: inline-block;
  19. vertical-align: middle;
  20. width: 300px;
  21. }

HTML

  1. <div class="block" style="height: 300px;">
  2.  
  3. <div class="centered">
  4. <h1>Some text</h1>
  5. <p>But he stole up to us again,and suddenly clapping his hand on my shoulder,said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
  6. </div>
  7.  
  8. </div>
  9.  
  10. <div class="block" style="height: 200px;">
  11.  
  12. <div class="centered">
  13. <h1>Some text</h1>
  14. <p>But he stole up to us again,said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
  15. </div>
  16.  
  17. </div>
  18.  
  19. <div class="block" style="height: 600px;">
  20.  
  21. <div class="centered">
  22. <h1>Some text</h1>
  23. <p>But he stole up to us again,said&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
  24. </div>
  25.  
  26. </div>

演示

http://jsfiddle.net/andresilich/YqKMH/

猜你在找的HTML相关文章