垂直居中div取决于内容

时间：2016-04-29 12:03:17

标签： html css

您好我有一个关于垂直居中的问题。让我用一些代码解释一下。我有以下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是浮动的，这正是我想要的。

我想要实现的是以下设置： enter image description here

我尝试了几种方法，例如将填充/边距设置为感知数字，但这不起作用。只有CSS才有可能吗？

2 个答案:

答案 0 :(得分：6)

更改一些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/

答案 1 :(得分：1)

有几种方法，其中没有一种方法使用float。这是一对......

内联块/垂直对齐 

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;
	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);
	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>

<强> 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;
	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);
	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>

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>

相关问题
最新问题