Центрировать 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?

html css

1

Rotan075 29 Апр 2016 в 15:03

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

1

Paulie_D 29 Апр 2016 в 12:17

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/

6

Lalji Tadhani 29 Апр 2016 в 12:09

Центрировать div по вертикали в зависимости от содержимого

2 ответа

Похожие вопросы

Новые вопросы

html