Question

您好我如何将此图像垂直放置在div的中间？登录或注销时标题的高度不同！

<div class="header">
  <nav class="header-content columns" data-topbar role="navigation"> 
    <div class="logo-area">
      <?php echo logo_header(); ?>
    </div>
    <section class="header-content-section">

    </section>
  </nav>
</div>

如何设置图像将保持垂直居中的css？ .header-content .logo-area {

} .header-content .logo-area img {

}

由于

Answer 1

您可以通过在左侧和右侧放置自动边距来实现此目的，但您需要将图像显示为块，因此它占据容器中的所有空间。

.header-content .logo-area img { 
  display: block; 
  margin: 0 auto;
}

Answer 2

您可以使用flexbox

执行此操作

.header-content .logo-area {
  display: flex;
  justify-content: center;
}
.header-content .logo-area img {
  width:250px;
  height:250px;
}

示例：https://jsfiddle.net/q59wv9ew/2/

将图像垂直放在中间

2 个答案: