I just want the text item1 ,item2,item3 to be vertically centered.
* {
box-sizing: border-box;
}
.container {
border: 1px solid black;
background-color: black;
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
.logo {
font-size: 4rem;
margin-right: auto;
color: white;
padding: 1rem;
}
.item {
border: 1px solid white;
font-size: 1.5rem;
text-align: center;
color: white;
vertical-align: center;
width: 15%;
padding: 0.5em;
}
.item:hover {
background-color: white;
color: black;
}<head>
<title>Navbar using flexbox</title>
</head>
<div class="container">
<div class="logo">LOGO</div>
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
</div>I just want the text item1 ,item2,item3 to be vertically centered. I tried using align-items to center it but it would center the complete div itself.What i want is that divs should take the whole height of the container and the text to be vertically and horizontally centered no matter what the height or witdh is.
