垂直对齐元素

Question

我试图了解如何在div中居中放置元素。 我有正在使用的基本代码，正在尝试将“这是一个按钮”元素放在中间

    <body>

<div style="width:960px;background-color:#d7d7d7;">

  <div style="
  width:400px;
  padding:10px;
  height:auto;
  background-color:#006699;
   display:inline-block;
  ">

  <p> Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>      

  <div style="
  width:100px;
  padding:10px;
  height:auto;
  background-color:#b1b1b1;
  float:right;
  display:inline-block;
  margin:auto!important;
  vertical-align:middle;
  ">

  <p>This is a button</p>

  </div>    

</div>

</body>

基本上是1格，分为2格，左侧带有文本，“ This is a button”标签位于右侧中心，但我不知道如何将其居中，我我尝试了各种方法。

感谢所有帮助/建议。

Answer 1

您可以使用以下标记进行操作：

<div class="container">
  <div class="left">
    <p>Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel sapien. Praesent nisl tortor, laoreet eu, dapibus quis, egestas non, mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  </div>
  <div class="right">
    <p class="button">Click Me!</p>
  </div>
</div>

CSS：

.container {
  width: 960px;
  background-color: #d7d7d7;
  overflow: hidden;
  display: table;
}

.left,
.right {
  box-sizing: border-box;
  width: 50%; 
  display: table-cell;
}

.left {
  padding: 20px 10px;
  background: #006699;
}

.right {
  text-align: center;
  vertical-align: middle;
}

.button {
  border: 1px solid green;
  display: inline-block;
}

http://jsfiddle.net/yh6mn/1/

不管段落的大小是多少-右侧的按钮都将始终与绝对中心对齐。

Answer 2

负边距可用于此目的。 参见示例： http ： //codepen.io/anon/pen/xhoBz

垂直对齐元素

问题描述

2 个解决方案

解决方案1
2 已采纳 2013-11-09 15:59:47

解决方案2
0 2013-11-09 15:51:20

垂直对齐元素

问题描述

2 个解决方案

解决方案1 2 已采纳 2013-11-09 15:59:47

解决方案2 0 2013-11-09 15:51:20

解决方案1
2 已采纳 2013-11-09 15:59:47

解决方案2
0 2013-11-09 15:51:20