CODEWITHSUNDEEP
htmlcss
user2989367
user2989367

Reputation: 435

How to veritcal-align top and vertical-align middle in same TD

Im trying to have an X and a checkmark on top of a box, and in the middle display the title, here is my html

enter image description here

And here is what the result is:

enter image description here

However I would like the h5 tag saying workout to be in the middle of the box. Can anyone help me?

Upvotes: 0

Views: 55

Answers (1)

JasonB
JasonB

Reputation: 6368

Here's a way to accomplish this using flex for positioning.

The td (div in this snippet) has relative positioning so you can use absolute positioning of the top actions with justify-content:space-between the items pushing them to the edges.

Then the div containing the h5 you want centered can be set to center vertically with align-items:center and horizontally with justify-content:space-around as long as you are using display:flex.

<div class="table-task" style="width:100px; height: 300px; background: chartreuse; position:relative">
  <div class="top-actions" style="position:absolute; top:0; width: 100%; box-sizing: border-box; display:flex; padding:10px; justify-content:space-between;">
    <span>X</span>
    <span>X</span>
  </div>
  <div style="width:100%; height:100%; box-sizing:border-box; display:flex; align-items: center; justify-content:space-around;">
    <h5>Workout</h5>
  </div>
</div>

Upvotes: 1

Related Questions