How to center text on topic preview?


Hi, how can I vertically center (bring down) the title, category, and tag on the topic preview next to the image? Thanks.

What about simply:

.main-link {
    display: flex;
    align-items: center;
}

It should be okay in your case.

7 Likes

Thank you so much :slight_smile:

I’ve noticed that while that works on Desktop, on mobile it remains the uncentered on mobile. (I’ve tried pasting the css into the mobile stylesheet)

Any discovery to this? I’ve been playing around with the code, but no luck

It’s a little more tricky.

I don’t know if it will work in all situations, but you can try and adjust the following:

For mobile only:

.topic-list-item {
    td {
        display: flex;
        align-items: center;
        max-width: 100%;
        position: relative;
    }
    
    .topic-details {
        flex: 2;
        
        display: flex;
        flex-direction: column;
        min-height: initial !important;
        position: initial !important;
        overflow: visible;
        
        .pull-right {
            position: absolute;
            right: 0;
            top: 0.5em;
            bottom: 0;
        }
        
        .num.activity {
            bottom: 0.5em;
        }
    }
    
    .topic-actions {
        flex: 0 0 100%;
    }
}

image

2 Likes

What a wonder! Thank you mate!

Another problem arises. The suggested topics table gets completely scattered/broken. Now what can be done :confused: I’ve played around with as much CSS as I know. vertical-align doesn’t work…

Can you show me a screenshot of what you mean?

Then, you should try to target only the main topics list.

What about replacing the selector by: .contents .topic-list-item { ? (note the .contents)

1 Like

It works a lot better, I noticed that the post count and username of the latest poster gets overlapped when the topic title is 2 lines or longer.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.