What is the best way to vertically center a button within a div?
Click here for an image of the issue
I recently started learning HTML & CSS and I am struggling to align a button in the vertical center of a div. Text-align:center doesn't seem to be working for me.
Another question: How can I ensure that the outer div is the same height as the middle-div?
p {
font-family: Roboto, Arial;
margin-top: 0;
margin-bottom: 0;
}
.user {
font-weight: 500;
}
.photo {
width: 46px;
border-radius: 28px;
}
.user-name,
.user-description,
.status {
width: 150px;
}
.avatar,
.middle-div,
.follow {
display: inline-block;
}<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<div>
<div class="avatar">
<img class="photo" src="av1.jpg">
</div>
<div class="middle-div">
<div>
<div class="user-name">
<p class="user">
oliver
</p>
</div>
<div class="user-description">
<p class="user-desc">
the cat
</p>
</div>
<div class="status">
<p class="status-desc">
Popular
</p>
</div>
</div>
</div>
<div class="follow">
<button class="follow-button">Follow</button>
</div>
</div>