How do I center align <li> display:block

[demonboy]

Hi,

If you scroll down to FTB Episodes Advanced Viewing on this page:

https://followtheboat.com/ftbmates/

you can see I’ve called the thumbnail for the latest topic. I’ve set the li to display:block so that it spans the remaining space.

How do I center align it within that li block?

I’d also like to add the title underneath. Code I have tried so far is this:

<li display="block"><a class="bbp-topic-permalink" href="<?php bbp_topic_permalink(); ?>"><?php echo get_the_post_thumbnail($post->ID,'thumbnail',array('class' => 'alignleft forum-icon'));?><br>
<a class="bbp-topic-permalink" href="<?php bbp_topic_permalink(); ?>"><?php bbp_topic_title(); ?> </li>

Whilst this manages to get the title underneath, but all still aligned left:

<li class="fa-thumb"><div text-align="center"><a class="bbp-topic-permalink" href="<?php bbp_topic_permalink(); ?>"><?php echo get_the_post_thumbnail($post->ID,'thumbnail',array('class' => 'alignleft forum-icon'));?><br>
<span class="fa-link"><?php bbp_topic_title(); ?></span></div></li>

Ultimately I’d like the thumbnail to be centered in that entire space, and the text underneath justified to the left but starting at the left of the box (so centred but left-justified).

If you scroll further down you can see under VIP Mates Only Video that there is a longer title. If I make the font any bigger to wraps to the side of the thumbnail.

Also, I appear to have inherited a strange little icon just before the title.

Thanks!

[rad]

Hi @demonboy,

Thanks for reaching out.

Adding a display block isn’t enough, and adding float without defined width is wrong if your intention is to create a column type of layout.

Example, let’s define widths and float

Given (but don’t add this CSS):

.bbp-forum-info, .bbp-topic-title {
    width: 60%;
}

Now we know it’s already 60% width, then the rest should be 40%.

Hence, you’ll need to add this CSS to Theme Options > CSS

     li.fa-thumb {
     width: 40%;
     text-align: center;
    }

Now, the text-alignment will not work on floating content, let’s add this CSS as well

    li.fa-thumb img {
     float:none;
    }

Hope this helps

[demonboy]

It certainly does, thank you, @Rad, and then I added a float:left to the little link and that aligned correctly too. Just one other question - what’s the strange little :before icon that’s appearing? My CSS for this is:

.fa-link {font-size:10px; float:left;}

And the html for the thumb and link is this:

    <li class="fa-thumb"><div text-align="center"><a class="bbp-topic-permalink" href="<?php bbp_topic_permalink(); ?>"><?php echo get_the_post_thumbnail($post->ID,'thumbnail',array('class' => 'alignleft forum-icon'));?><br>
    <span class="fa-link"><?php bbp_topic_title(); ?></span></div></li>

There’s nothing obvious in that code that could be creating the strange icon other than the <br>.

[ruenel]

You’re welcome!
We’re glad @Rad were able to help you out.

[demonboy]

@RueNel - sorry, only half my post was answered. Can you refer to my second post in this thread re the character?

[demonboy]

OK, I solved it by just putting a display:none on that ::before element.

[christian]

We’re glad that you’ve figured it out, @demonboy.