垂直对齐（内联，中间）div 与图像和文本

Question

我只想将两个 div 并排对齐，并将每个 div 的内容垂直居中对齐。任何帮助都可以挽救我的心理健康。这是我的代码：

.main-kozossegitag-container {
 display: block;
 width: 100%;
 height: 100%;
}

.main-kozossegitag-text1 {
 display: inline-block;
 width: 60%;
 height: 100%;
 vertical-align: middle;
 text-align: right;
}

.main-kozossegitag-nev {
 font-size: 2em;
}

.main-kozossegitag-title {
 font-size: 1em;
}

.main-kozossegitag-visszhang {
 font-size: 1em;
}

.main-kozossegitag-image1 {
 display: inline-block;
 width: 39%;
}

.profilkep {
    max-width: 100%;
 height: auto;
 border-radius: 50%;
 border: 3px solid rgba(255,255,255,0.5);
 box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}

<div class="main-kozossegitag-container">
  <div class="main-kozossegitag-text1">
    <h3 class="main-kozossegitag-nev">Rita</h3>
    <p class="main-kozossegitag-title">CEO</p>
    <p class="main-kozossegitag-visszhang">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="main-kozossegitag-image1">
    <img src="http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/szabo_rita.jpg" alt="Szabó Rita" class="profilkep">
  </div>
</div>

如您所见，两个 div 彼此相邻，但我无法在中间垂直对齐文本:(

Answer 1

将垂直对齐添加到第二个 Div。

.main-kozossegitag-image1 {
  display: inline-block;
  width: 39%;
  vertical-align: middle;
}

Answer 2

.main-kozossegitag-container {
 display: table;
 width: 100%;
 height: 100%;
}

.main-kozossegitag-text1 {
 display: table-cell;
    vertical-align : middle;
 width: 60%;
 height: 100%;
 vertical-align: middle;
 text-align: right;
  
}

.main-kozossegitag-nev {
 font-size: 2em;
    
}

.main-kozossegitag-title {
 font-size: 1em;
}

.main-kozossegitag-visszhang {
 font-size: 1em;
}

.main-kozossegitag-image1 {
 display: table-cell;
  vertical-align : middle;
 width: 39%;
  
}

.profilkep {
    max-width: 100%;
 height: auto;
 border-radius: 50%;
 border: 3px solid rgba(255,255,255,0.5);
 box-shadow: 1px 1px 5px rgba(0,0,0,0.3);
}

<div class="main-kozossegitag-container">
  <div class="main-kozossegitag-text1">
    <h3 class="main-kozossegitag-nev">Rita</h3>
    <p class="main-kozossegitag-title">CEO</p>
    <p class="main-kozossegitag-visszhang">Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="main-kozossegitag-image1">
    <img src="http://www.kaptarcoworking.hu/wp-content/uploads/2015/07/szabo_rita.jpg" alt="Szabó Rita" class="profilkep">
  </div>
</div>

我将 display : table; 添加到您的主容器 (main-kozossegitag-text1) 并将 display : table-cell; vertical-align : middle 添加到您的两个子容器 div。这些属性使它们具有与 table 和包含垂直对齐内容的单元格相同的行为。我只是弄乱了一些 left/right 余量，但其余部分似乎有效。

Answer 3

只要给这个 div 添加一个 float-left :

.main-kozossegitag-text1{ display: table-cell; vertical-align : middle; width: 60%; height: 100%; vertical-align: middle; text-align: right; float: left; }

Answer 4

请看我的fiddlehere.

我使用了 CSS3 flex-box 模型。我更改了这些类:

的属性

.main-kozossegitag-container {
    display: flex;
    align-items: stretch;
    flex-flow: row wrap;
    width: 100%;
    height: 100%;
    border: 1px solid red;
}

.main-kozossegitag-text1 {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: flex-end;
    align-content: flex-end;
    box-sizing: border-box;
    width: 60%;
    padding-right: 20px;
}

更多关于 CSS3 flex-box here。

垂直对齐（内联，中间）div 与图像和文本

Vertical align (inline, middle) divs with image and text

css

inline

vertical-alignment