1

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 つに分割されていますが、中央に配置する方法がわかりません。ありとあらゆる方法を試しました。

すべてのヘルプ/アドバイスをいただければ幸いです。

4

2 に答える 2

2

次のマークアップでそれを行うことができます。

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

段落のサイズに関係なく、右側のボタンは常に絶対中央に配置されます。

于 2013-11-09T15:59:47.660 に答える