中心DIV内容流体垂直和水平 [英] Center DIV content Fluid Vertical and Horizontal

问题描述

这是我的示例：

行高不适用于流体div。我现在的代码是基于行高，但盒子的大小改变。 那么，如何才能让链接（内容）总是在正确的中间？

我想确保此DIV中的内容总是从顶部和两侧同样地居中。垂直和水平居中。

当前代码：（注意样式标记为空白，因为它是动态填充的）

 < style type =text / css> 
 .box {
 width：468px; / * php改变这有时* / 
 height：60px; / * php更改这有时* / 
 background：#eee; 
 text-align：
 center; 
 border：
 1px solid rgb（177，172，171）; 
 line-height：61px; 
} 
< / style> 
 
< div style =class =boxid => 
< a style =color：＃333; font-weight：boldhref =claimPrize（）;> Winner！< / a> 
< / div> 
  

解决方案

不久前，搜索并找到一篇关于从CSS技巧绝对定位的文章，这里是文章和一个伴随

 <$ c 
 $ c> / *这个父对象可以是任何宽度和高度* / 
 .block {
 text-align：center; 
} 
 
 / *鬼，保持完美的中心* / 
 .block：before {
 content：''; 
 display：inline-block; 
 height：100％; 
 vertical-align：middle; 
 margin-right：-0.25em; / *调整间距* / 
} 
 
 / *要居中的元素，
也可以是任何宽度和高度* / 
 .centered {
显示：inline-block; 
 vertical-align：middle; 
 width：300px; 
} 
  

HTML

 < div class =blockstyle =height：300px;> 
 
< div class =centered> 
< h1>一些文字< / h1> 
< p>但他又偷了我们的手，突然拍他的手在我的肩膀上，—你看到什么样子的人看起来像男人去那艘船一会儿？< / p> ; 
< / div> 
 
< / div> 
 
< div class =blockstyle =height：200px;> 
 
< div class =centered> 
< h1>一些文字< / h1> 
< p>但他又偷了我们的手，突然拍他的手在我的肩膀上，—你看到什么样子的人看起来像男人去那艘船一会儿？< / p> ; 
< / div> 
 
< / div> 
 
< div class =blockstyle =height：600px;> 
 
< div class =centered> 
< h1>一些文字< / h1> 
< p>但他又偷了我们的手，突然拍他的手在我的肩膀上，—你看到什么样子的人看起来像男人去那艘船一会儿？< / p> ; 
< / div> 
 
< / div> 
  

演示

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

This is the example I have:

Line height does not apply to fluid divs. The code I have is currently based on line-height but the the sizes of the boxes change. So how can I have a link (content) always in the exact middle?

I want to make sure that the content inside this DIV is always going to be equally centered from the top and the sides. Vertical and Horizontal centered.

Current code: (note style tag is blank as this is dynamic filled)

    <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>

解决方案

Ran into a similar situation not too long ago, did a search and found an article about absolute centering from css-tricks, here is the article and an accompanying fiddle to test it out.

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&mdash;"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&mdash;"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&mdash;"Did ye see anything looking like men going towards that ship a while ago?"</p>
    </div>

</div>

Demo

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

这篇关于中心DIV内容流体垂直和水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！