Vertical align middle div with center div

Question

I have HTML and CSS below :

.lpanel{
 text-align: center;
 height: 50px;
}
.logo{
 display: inline-block;
 font-size: 25px;
}
.slogan{
 display: inline-block;
 vertical-align: middle;
 line-height: 50px;
}

     <div class="lpanel">
            <div class="logo">LOGO HERE</div>
            <div class="slogan">SLOGAN IS HERE</div>
    </div>

I know can using display:table for .lpanel and display:table-cell for .slogan to vertical middle this slogan div but I can't do this because when I add display:table for .lpanel then 2 class .logo and .slogan not align center.

You can see picture : enter image description here

How to fix this ?

Thanks you so much.

Yes this code above can align center to class logo and slogan but not vertical align middle class Slogan. When I vertical align middle class Slogan it not center align anymore — Kingo, Jan 09 '15 at 07:26
@Ivan is there any problem in your question i don't thing there is problem in your question — sanoj lawrence, Jan 09 '15 at 07:29
That may be the case, but frankly it's not clear why it wouldn't be. — Nathan Tuggy, Jan 09 '15 at 07:30

score 0 · Answer 1 · answered Jan 09 '15 at 07:25

try this example..

.lpanel {
  text-align: center;
  height: 50px;
}
.lpanel div {
  vertical-align: middle;
}
.logo {
  display: inline-block;
  font-size: 25px;
}
.slogan {
  display: inline-block;
  vertical-align: middle;
  line-height: 50px;
}

<div class="lpanel">
  <div class="logo">LOGO HERE</div>
  <div class="slogan">SLOGAN IS HERE</div>
</div>

score 0 · Accepted Answer · answered Jan 09 '15 at 07:25

add vertical align to both the elements

.lpanel {
  text-align: center;
  height: 50px;
}
.logo {
  display: inline-block;
  font-size: 25px;
  vertical-align: middle;
  border: 1px solid red;
}
.slogan {
  display: inline-block;
  border: 1px solid red;
  vertical-align: middle;
}

<div class="lpanel">
  <div class="logo">LOGO HERE</div>
  <div class="slogan">SLOGAN IS HERE</div>
</div>

sanoj lawrence · Answer 3 · 2015-01-09T07:35:53.077

0

.lpanel{
            margin-top:50px;
            text-align: center;
            height: 50px;
            vertical-align: middle;
            line-height: 50px;
            
        }
        .logo{
            display: inline-block;
            font-size: 100px;
        }
        .slogan{
            display: inline-block;
            float: top;
        }

     <div class="lpanel">
            <div class="logo">LOGO HERE</div>
            <div class="slogan">SLOGAN IS HERE</div>
    </div>

edited Jan 09 '15 at 07:35

answered Jan 09 '15 at 07:26

sanoj lawrence

1,085
4
24
55

It not 'vertical-align: middle;' .You can add bigger font size to see this. – Kingo Jan 09 '15 at 07:33

Vertical align middle div with center div

3 Answers3