I have been struggling to center the content of my divs both horizontally and vertically. I have come across some threads discussing this issue, but I have not been able to successfully implement it in my code.
In my setup, there are three divs (.block) that are supposed to be centered inside another div (.container), which is also centered on the screen. However, the content of the blocks is not centered vertically. I attempted using line-height, but it caused text to overflow out of the block.
Below is a snippet of my code:
.container {
width: 70%;
margin: 10px auto;
position: relative;
text-align: center;
border: 1px solid black;
}
.block {
background-image: -webkit-linear-gradient(150deg, #D7D7D7, #979797);
background-image: -o-linear-gradient(150deg, #D7D7D7, #979797);
background-image: linear-gradient(240deg, #D7D7D7, #979797);
border-radius: 10px;
height: 100px;
width: 100px;
display:inline-block;
margin: 10px;
padding: 10px;
vertical-align: middle;
line-height: 1.5;
}
<div class="container">
<div class="block">Hello</div>
<div class="block">Everybody</div>
<div class="block">Would like to center it please</div>
</div>
I tried enclosing the content in a p tag, which improved the alignment slightly, but it still remains off-center.
Any advice or pointers would be greatly appreciated. Thank you!