Title: CSS Fix to Vertically Align Columns
Last modified: December 8, 2021

---

# CSS Fix to Vertically Align Columns

 *  Resolved [Ethan Harris](https://wordpress.org/support/users/ethan11698/)
 * (@ethan11698)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/css-fix-to-vertically-align-columns/)
 * Could someone please provide me with some CSS which would vertically align the
   posts so the ‘View here’ buttons align and the containers are the same height?
   I have tried various methods but do not know how to fix this. Thanks.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcss-fix-to-vertically-align-columns%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [tugbucket](https://wordpress.org/support/users/tugbucket/)
 * (@tugbucket)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/css-fix-to-vertically-align-columns/#post-15144456)
 *     ```
       .mkdf-blog-list-holder .mkdf-blog-list {
           position: relative;
           width: 100%;
           vertical-align: middle;
           list-style: none;
           margin: 0;
           padding: 0;
       	display: flex;
           flex-wrap: wrap;
       }
       .mkdf-blog-list-holder .mkdf-bli-inner {
           position: relative;
           display: inline-block;
           width: 100%;
           vertical-align: middle;
           height: 100%;
       }
       .mkdf-blog-list-holder .mkdf-bli-content {
           position: static;
           display: inline-block;
           width: 100%;
           vertical-align: middle;
           box-sizing: border-box;
       }
       .mkdf-blog-list-holder .mkdf-post-read-more-button {
           position: absolute;
           display: inline-block;
           width: 100%;
           vertical-align: middle;
           margin: 0;
           bottom: 0;
           left: 0;
       }
       .mkdf-blog-list-holder .mkdf-bli-inner {
           position: relative;
           display: inline-block;
           width: 100%;
           vertical-align: middle;
           height: 100%;
           padding: 0 0 30px;
       }
       .mkdf-normal-space .mkdf-outer-space .mkdf-item-space {
           padding: 0 15px 40px;
           margin: 0 0 30px;
       }
       ```
   
 * might not be totally correct due to your classes but that’s basically how to 
   do it.
 * Make your list flex and flex-wrap
    make the inner div 100% height make the div
   wrapping the button position static make the button absolute add bottom padding
   to the containers so the button never overlaps content
 *  Thread Starter [Ethan Harris](https://wordpress.org/support/users/ethan11698/)
 * (@ethan11698)
 * [4 years, 6 months ago](https://wordpress.org/support/topic/css-fix-to-vertically-align-columns/#post-15146467)
 * Hi thanks so much, that worked, the issue is fixed across all pages!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘CSS Fix to Vertically Align Columns’ is closed to new replies.

## Tags

 * [alignment](https://wordpress.org/support/topic-tag/alignment/)
 * [blogs](https://wordpress.org/support/topic-tag/blogs/)
 * [css](https://wordpress.org/support/topic-tag/css/)
 * [display](https://wordpress.org/support/topic-tag/display/)
 * [posts](https://wordpress.org/support/topic-tag/posts/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 3 participants
 * Last reply from: [Ethan Harris](https://wordpress.org/support/users/ethan11698/)
 * Last activity: [4 years, 6 months ago](https://wordpress.org/support/topic/css-fix-to-vertically-align-columns/#post-15146467)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics