Question

我希望左右div中的内容垂直和水平居中。左边的div只包含一些文字。右边的div有一个按钮，下面有一行文字。我尝试了行高技巧，但这对右边div中的第二行不起作用。有什么想法吗？

HTML

<div class="container">
    <div class="lcontent">
        <p>Hello</p>
    </div>
    <div class="rcontent">
        <input type="button" class="red" value="Upgrade" /><br />for more tokens!
    </div>
</div>

CSS

div {
    border:1px solid #000000;    
}

div.container {
  height: 100px;
}

div.lcontent, div.rcontent {
  height: 100%;
  float:left;
}

div.lcontent {
  text-align: center;
  line-height: 100px; 
  width:52%;
}

http://jsfiddle.net/dCKnE/

Answer 1

为了帮助垂直对齐div中的内容，您可以执行以下操作：

<div style="display: table; height: 450px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      Your centered content.
    </div>
  </div>
</div>

关键是使用display:table和display:table-cell来集中您的内容。对于IE，我不确定它是否适用于版本8及以下...但我可能错了。

Answer 2

试试这个

<div class="container">
 <table align="center">

  <tr>
   <td> 
    <div class="lcontent">
     <p>Hello</p>
    </div>
   <div class="rcontent">
    <input type="button" class="red" value="Upgrade" /><br />for more tokens!
   </div>
  </td>
 </tr>
</table>
</div>

Answer 3

如果您不想使用表格，这是一个解决方案。

HTML

<div class="left">
    <div class="content">
    Hello
    </div>
</div>
<div class="right">
    <div class="content">
        <input type="button" value="Upgrade"/>
        <br />
        for more tokens!
    </div>
</div>

CSS

div.left {
    float:left;
    border:1px solid #000000; 
    height:100px;
    width:53%;
}

div.right {
    float:right;
    border:1px solid #000000;    
    height:100px;
    width:46%;
}

div.content{
    text-align:center;
    position:relative; 
    top:30%;    
    height:100%;
    border:0px solid #000;
}

http://jsfiddle.net/dCKnE/13/

如何使这个div居中正常工作？

3 个答案: