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

Question

我只想将两个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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我将display : table;添加到您的主容器（main-kozossegitag-text1）和display : table-cell; vertical-align : middle到您的两个子div。这些属性使它们具有与包含垂直对齐内容的表和单元格相同的行为。我只是搞砸了一些左/右边距，但其余的似乎都有效。

Answer 2

将Vertical-align添加到第二个Div。

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

Answer 3

请看我的小提琴here。

我使用的是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的更多信息。

Answer 4

只需向此div添加一个float-left：

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