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个div，在左侧分为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 个答案: