垂直居中在div div内的div - 相对位置 [英] vertically centring div inside parent div - relative position

问题描述

什么是正确的方式垂直中心的div在其父div，如果两者都是位置：相对？

我的HTML

 <文章> 
< div class =row> 
 
< div class =text-cell> 
< div class =text-content>< h1>文字< / h1>< / div> 
< / div> 
 
< / div> 
< / article> 
  

CSS

  article {
 position：relative; 
保证金：0; 
 padding：0; 
} 
 
 .text-cell {
 position：relative; 
 padding：0; 
保证金：0; 
} 
  

希望'text-cell'在文章中居中。 （'row'是Bootstrap 3框架）

解决方案使用 display：inline-block;

http://jsfiddle.net/kk61saw3 /

article {position：relative;保证金：0;填充：0; text-align：center;}。text-cell {position：relative;显示：inline-block; vertical-align：middle;填充：0;保证金：0; / * min-height：50px; * / border：1px solid＃000;宽度：100％;}

< article>< div class =row> < div class =text-cell> < div class =text-content>< h1> text< / h1>< / div> < / div>< / div>< / article>

What is the proper way to vertically center a div inside its parent div, if both are position:relative?

my HTML

<article>
<div class="row">

    <div class="text-cell">
        <div class="text-content"><h1>text</h1></div>
    </div>

</div>
</article>

CSS

article {
  position: relative;
  margin: 0; 
  padding: 0;
}

.text-cell {
  position: relative;
  padding: 0;
  margin: 0;
}

wanting 'text-cell' centred in article. ('row' is Bootstrap 3 framework)

解决方案

use display: inline-block;

http://jsfiddle.net/kk61saw3/

article {
  position: relative;
  margin: 0; 
  padding: 0;
    text-align: center;
}

.text-cell {
   position: relative;
   display: inline-block;
   vertical-align: middle;
    padding: 0;
    margin: 0;
    /*min-height: 50px;*/
    border: 1px solid #000;
    width: 100%;
}

<article>
<div class="row">

    <div class="text-cell">
        <div class="text-content"><h1>text</h1></div>
    </div>

</div>
</article>

这篇关于垂直居中在div div内的div - 相对位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！