时间戳

首页 > 解决方案 > 如何在div下垂直对齐h3文本？

html - 如何在div下垂直对齐h3文本？

问题描述

在 ahref 我有 div 元素。该 div 具有背景图像，在 div 下我正在显示 h3 文本。

我希望 h3 文本垂直居中对齐，但我无法做到。请帮我。

下面是我的 html 和样式代码。

<html>
<head>
<style>
.promo-item {
    height: 400px;
}
.promo-item h3 {
    font-size: 40px;
    text-align: center;
}

.item-1 {
    background: url('images/mung_beans.jpg');
    }
    
.item-2 {
    background: url('images/coffee_beans_1.jpg');
    }
    
.item-3 {
    background: url('images/grapes.jpg');
    }
        
.item-1,
.item-2,
.item-3 {
    width: 33%;
    background-size: cover;
    background-position: 50% 50%;
    float:left;
    }
    
</style>
</head>
<body>
    <div>
        <a href="#">
            <div class="promo-item item-1">
                <h3>One</h3>
            </div>
        </a>
        <a href="#">
            <div class="promo-item item-2">
                <h3>Two</h3>    
            </div>
        </a>
        <a href="#">
            <div class="promo-item item-3">
                <h3>Three</h3>
            </div>
        </a>
    </div>
</body>
</html>

标签： htmlcss

解决方案

使用flexbox并将align-itemsandjustify-content属性设置为center.

.promo-item {
  height: 400px;
}

.promo-item h3 {
  font-size: 40px;
  text-align: center;
}

.item-1 {
  background: lightgrey;
}

.item-2 {
  background: lightgrey;
}

.item-3 {
  background: lightgrey;
}

.item-1,
.item-2,
.item-3 {
  width: 33%;
  background-size: cover;
  background-position: 50% 50%;
  float: left;
  display: flex;
  align-items: center;
  justify-content:center;
}
<html>

<body>
  <div>
    <a href="#">
      <div class="promo-item item-1">
        <h3>One</h3>
      </div>
    </a>
    <a href="#">
      <div class="promo-item item-2">
        <h3>Two</h3>
      </div>
    </a>
    <a href="#">
      <div class="promo-item item-3">
        <h3>Three</h3>
      </div>
    </a>
  </div>
</body>

</html>

推荐阅读