In ahref I have div element. That div has background image and under div I am displaying h3 text.
I want h3 text to be vertically center aligned but I am unable to do it. Please help me.
Below is my html and style code.
<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>