Выровнять текст по вертикали внутри div с помощью CSS

Question

У меня есть следующий код HTML &.

Я хотел бы разместить весь текст по вертикали по центру. Даже «Текст здесь» будет выровнен с логотипом. Может ли кто-нибудь объяснить, как я это делаю с моим кодом? Большое спасибо.

Fiddle:http://jsfiddle.net/z6yet59f/

.slogan { 
 
    background:#eaeaea; 
 
    float:left; 
 
    width:600px 
 
} 
 

 
.slogan img { 
 
    cursor: pointer; 
 
    width:92px; 
 
    height:92px 
 
} 
 

 
.slogan div { 
 
    float:left; 
 
    margin-left: 35px; 
 
} 
 

 
.slogan div span { 
 
    display:block 
 
}

<div class="slogan"> 
 
    <div> 
 
      <p> 
 
       <span>Text here</span> 
 
       <img src="https://cdn3.iconfinder.com/data/icons/rcons-social/32/blog_blogger_google-128.png" id="chat_link_35" title="click to start live chat .."> 
 
      </p> 
 
    </div> 
 

 
    <div> 
 
     <span class="heading">National Helpline</span> 
 
     <span>Hello</span> 
 
    </div> 
 

 
    <div> 
 
     <span class="heading" style="color:orange">National Helpline</span> 
 
     <span>Hello</span> 
 
    </div> 
 
    
 
</div>

Answer 1

Вы можете найти обновленный код ниже, надеюсь, что это позволит решить проблему.

.slogan { 
 
    background:#eaeaea; 
 
    float:left; 
 
    width:600px 
 
} 
 

 
.slogan img { 
 
    cursor: pointer; 
 
    width:92px; 
 
    height:92px; 
 
    vertical-align: middle; 
 
} 
 

 
.slogan div { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    margin-left: 35px; 
 
} 
 
.slogan div p{display:block;} 
 
    .slogan div p span{ 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 

 
.slogan div span { 
 
    display:block 
 
}

<div class="slogan"> 
 
    <div> 
 
      <p> 
 
       <span>Text here</span> 
 
       <img src="https://cdn3.iconfinder.com/data/icons/rcons-social/32/blog_blogger_google-128.png" id="chat_link_35" title="click to start live chat .."> 
 
      </p> 
 
    </div> 
 

 
    <div> 
 
     <span class="heading">National Helpline</span> 
 
     <span>Hello</span> 
 
    </div> 
 

 
    <div> 
 
     <span class="heading" style="color:orange">National Helpline</span> 
 
     <span>Hello</span> 
 
    </div> 
 
    
 
</div>

Answer 2

Просто добавьте этот класс .valign-middle

CSS

.valign-middle { 
    -webkit-display: flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
    -webkit-align-items: center; 
    align-items: center; 
} 

HTML

<div class="slogan valign-middle"> 
    <div> 
     <p> <span>Text here</span> 

      <img src="https://cdn3.iconfinder.com/data/icons/rcons-social/32/blog_blogger_google-128.png" id="chat_link_35" title="click to start live chat .."> 
     </p> 
    </div> 
    <div> <span class="heading">National Helpline</span> 
<span>Hello</span> 

    </div> 
    <div> <span class="heading" style="color:orange">National Helpline</span> 
<span>Hello</span> 

    </div> 
</div> 

DEMO HERE