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

Question

I just want to align two divs next to each other and aligning the content vertically middle in each. Any help could save my mental health. Here is my code:

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

As you see the two divs are next to each other, but I can not align the text vertically in the middle :(

Answer 1

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

I added display : table; to your main container (main-kozossegitag-text1) and display : table-cell; vertical-align : middle to your both sub-div. Those properties let them have the same behaviour as a table and cells that contains vertically aligned content. I just messed up with some left/right margin but the rest seems to work.