垂直对齐中间 div 与中心 div

Question

下面有 HTML 和 CSS :

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

我知道可以将 display:table 用于 .lpanel 并使用 display:table-cell 用于 .slogan 以垂直中间这个标语 div 但我不能这样做，因为当我添加 display:table for .lpanel then 2 class .logo and .slogan not align center.

你可以看到图片：

如何解决这个问题？

非常感谢。

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

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

垂直对齐中间 div 与中心 div

Vertical align middle div with center div

html

css