Html 如何在div下垂直对齐h3文本？_Html_Css

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

html css

Html 如何在div下垂直对齐h3文本？,html,css,Html,Css,在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:

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


.宣传品{
高度：400px；
}
.宣传品h3{
字体大小：40px；
文本对齐：居中；
}
.项目-1{
背景：url（'images/mung_beans.jpg'）；
}
.项目-2{
背景：url（'images/coffee_beans_1.jpg'）；
}
.项目-3{
背景：url（'images/grapes.jpg'）；
}
.项目-1，
.项目-2，
.项目-3{
宽度：33%；
背景尺寸：封面；
背景位置：50%50%；
浮动：左；
}

使用并将

对齐项目

和

对齐内容

属性设置为

居中

.promo项目{
高度：400px；
}
.宣传品h3{
字体大小：40px；
文本对齐：居中；
}
.项目-1{
背景：浅灰色；
}
.项目-2{
背景：浅灰色；
}
.项目-3{
背景：浅灰色；
}
.项目-1，
.项目-2，
.项目-3{
宽度：33%；
背景尺寸：封面；
背景位置：50%50%；
浮动：左；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

如果我使用display:flex；并对齐项目：居中；，h3文本垂直对齐，但不水平对齐。如何使文本垂直和水平居中对齐。@userrmgs我已经更新了答案。使用

justify content:center

它正在工作。感谢you@userrmgs请考虑接受我的回答：