垂直对齐中间div与中心div

Question

我在下面有HTML和CSS：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我知道可以使用display:table用于.lpanel而display:table-cell用于.slogan到这个口号div的垂直中间但是我不能这样做，因为当我为.lpanel添加display：table然后2类.logo和.slogan不对齐中心。

你可以看到图片：

如何解决这个问题？

非常感谢你。

Answer 1

试试这个例子..

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

Answer 2

为两个元素添加垂直对齐

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

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;