垂直取決於內容的中心div

Question

你好，我有一個垂直居中div的問題。讓我用一些代碼來解釋它。我有以下的HTML代碼：

<div class="container"> 

    <div class="wrapper"> 
     <div class="content"> 
      <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
      <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
       </p> 
     </div> 
     <div class="button_wrapper"> 
      <a class="button" href="#"></a> 
     </div> 
    </div> 

    <!-- LARGE CONTENT --> 
    <div class="wrapper"> 
     <div class="content"> 
      <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
      <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque porta cursus. Fusce ut nisi eget enim vestibulum pulvinar ac vehicula purus 
       </p> 
     </div> 
     <div class="button_wrapper"> 
      <a class="button" href="#"></a> 
     </div> 
    </div> 

</div> 

如果你看一下我的DEMO你會看到，黃色的DIV是浮動的，這就是我想要的東西。

我想達到什麼是以下設置：

我試過幾件事情，如設置填充/保證金作爲一個感性的電話號碼，但是沒有奏效。它甚至可能只有CSS？

Answer 1

有幾種方法，其中沒有使用float。這裏有一對夫婦....

inline-block的/垂直對齊

body{background-color:#fff;} 
 
.container{ 
 
    width:555px; 
 
} 
 
.wrapper { 
 
    background-color: #eeeeee; 
 
    float: left; 
 
    margin-bottom: 10px; 
 
    padding: 10px 10px; 
 
    clear: both; 
 
    width: 100%; 
 
} 
 
.content{ 
 
    background-color:red; 
 
\t width:89%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    color:#fff; 
 
} 
 
.button_wrapper{ 
 
    background-color: yellow; 
 
    width: 10%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-left: -.25em; 
 
} 
 
.button{ 
 
    background-image: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-48.png); 
 
\t background-repeat:no-repeat; 
 
\t display:block; 
 
\t width:48px; 
 
\t height:48px; \t 
 
\t background-position:center; 
 
    
 
}

<div class="container"> 
 

 
    <div class="wrapper"> 
 
     <div class="content"> 
 
      <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
 
      <p> 
 
\t \t \t  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
\t \t  </p> 
 
     </div> 
 
     <div class="button_wrapper"> 
 
      <a class="button" href="#"></a> 
 
     </div> 
 
    </div> 
 
    
 
    <!-- LARGE CONTENT --> 
 
    <div class="wrapper"> 
 
     <div class="content"> 
 
      <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
 
      <p> 
 
\t \t \t  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque porta cursus. Fusce ut nisi eget enim vestibulum pulvinar ac vehicula purus 
 
\t \t  </p> 
 
     </div> 
 
     <div class="button_wrapper"> 
 
      <a class="button" href="#"></a> 
 
     </div> 
 
    </div> 
 

 
</div>

Flexbox的

body{background-color:#fff;} 
 
.container{ 
 
    width:555px; 
 
} 
 
.wrapper { 
 
    background-color: #eeeeee; 
 
    display: flex; 
 
    align-items: center; 
 
    margin-bottom: 10px; 
 
    padding: 10px 10px; 
 
    clear: both; 
 
    width: 100%; 
 
} 
 
.content{ 
 
    background-color:red; 
 
\t width:89%; 
 
    color:#fff; 
 
} 
 
.button_wrapper{ 
 
    background-color: yellow; 
 
    width: 10%; 
 
} 
 
.button{ 
 
    background-image: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-48.png); 
 
\t background-repeat:no-repeat; 
 
\t display:block; 
 
\t width:48px; 
 
\t height:48px; \t 
 
\t background-position:center; 
 
    
 
}

<div class="container"> 
 

 
    <div class="wrapper"> 
 
     <div class="content"> 
 
      <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
 
      <p> 
 
\t \t \t  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
\t \t  </p> 
 
     </div> 
 
     <div class="button_wrapper"> 
 
      <a class="button" href="#"></a> 
 
     </div> 
 
    </div> 
 
    
 
    <!-- LARGE CONTENT --> 
 
    <div class="wrapper"> 
 
     <div class="content"> 
 
      <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
 
      <p> 
 
\t \t \t  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque porta cursus. Fusce ut nisi eget enim vestibulum pulvinar ac vehicula purus 
 
\t \t  </p> 
 
     </div> 
 
     <div class="button_wrapper"> 
 
      <a class="button" href="#"></a> 
 
     </div> 
 
    </div> 
 

 
</div>

CSS表

body { 
 
    background-color: #fff; 
 
} 
 
.container { 
 
    width: 555px; 
 
} 
 
.wrapper { 
 
    background-color: #eeeeee; 
 
    display: table; 
 
    vertical-align: middle; 
 
    margin-bottom: 10px; 
 
    padding: 10px 10px; 
 
    clear: both; 
 
    width: 100%; 
 
} 
 
.content { 
 
    background-color: red; 
 
    width: 89%; 
 
    color: #fff; 
 
    display: table-cell; 
 
} 
 
.button_wrapper { 
 
    width: 10%; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.button { 
 
    background-color: yellow; 
 
    background-image: url(https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-48.png); 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
    width: 48px; 
 
    height: 48px; 
 
    background-position: center; 
 
}

<div class="container"> 
 

 
    <div class="wrapper"> 
 
    <div class="content"> 
 
     <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
     </p> 
 
    </div> 
 
    <div class="button_wrapper"> 
 
     <a class="button" href="#"></a> 
 
    </div> 
 
    </div> 
 

 
    <!-- LARGE CONTENT --> 
 
    <div class="wrapper"> 
 
    <div class="content"> 
 
     <h3>Lorem ipsum dolor sit amet, consectetur</h3> 
 
     <p> 
 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque porta cursus. Fusce ut nisi eget enim vestibulum pulvinar ac vehicula purus 
 
     </p> 
 
    </div> 
 
    <div class="button_wrapper"> 
 
     <a class="button" href="#"></a> 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 2

改變一些CSS屬性

.wrapper { 
    position: relative; 
    background-color: #eeeeee; 
    float: left; 
    margin-bottom: 20px; 
    padding: 10px 10px; 
    clear: both; 
    width: 100%; 
} 
.button_wrapper { 
    background-color: yellow; 
    float: left; 
    position: absolute; 
    right: 8px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 10%; 
} 

https://jsfiddle.net/wvd9pddg/2/