Centering Authors List Using WPBakery Page Builder

Sorry, I forgot to add the shortcode I’m using:

[authors_list style="1" columns="" avatar_size="170" show_title="yes" after_title="Custom Text" show_count="no" show_bio="no" show_link="no" skip_empty="no" exclude="" include="12"]

Hi @ottfried

This should work:

.authors-list-item { text-align: center; }

If it does not work out, can you please send over the URL to the page, I can use the dev tools to figure out what’s going on and how to resolve it.

Hi @wpkube

I’ve added your snippet to the custom CSS of my page but nothing changed.

Here’s the URL of the page I need help with: Link

I’ve tried to “centre” the individual text blocks using individual margins, but of course this does not look the same in every resolution.
I have inserted another row below the text blocks I manipulated (marked with “This row is for testing purposes”), in which there is a text block with an Authors List shortcode and unchanged margin.

• This reply was modified 3 years, 3 months ago by ottfried.

Hi @ottfried

The output is centered at the moment. Here’s a screenshot https://i.imgur.com/sxi1reL.png

But maybe I misunderstood what’s needed.

Hi @wpkube

Yes, within the Authors List block I was able to center all content using CSS.

I am referring to the alignment of the shortcode element itself on the whole page, see here:

View post on imgur.com

The text and the Authors-List shortcode are in the same text block and are both centered using the following code:

<p style="text-align: center;">This row is for testing purposes.</p>
<p style="text-align: center;">[authors_list style="1" columns="" avatar_size="170" show_title="yes" after_title="Custom Text" show_count="no" show_bio="no" show_link="no" skip_empty="no" exclude="" include="9"]</p>

Yet only the text is displayed centered, the Authors-List block is left-aligned.

Hi @ottfried

The top level element of the plugin output is a div which is a block element and does not get affected by text-align rules of it’s parent. Block elements take up 100% of the width.

You’ll need to switch it to a inline-block:

.authors-list-items {
    display: inline-block;
}

Hi @wpkube

Your suggestion to switch to an inline block didn’t change anything, unfortunately.
However, I was able to solve the problem as follows:

Step 1: I created a class authorcentered with the following content:

.authorcentered {
	display: flex;
	justify-content: center;
	white-space: nowrap;
}

Step 2: I used the authors-list-shortcode inside the class like this:
<div class="authorcentered">[authors_list style="1" columns="" avatar_size="150" show_title="yes" after_title="Marketing" show_count="no" show_bio="no" show_link="no" orderby="include" order="ASC" skip_empty="no" bio_word_trim="10" exclude="" include="15"]</div>

Applying display: flex; justify-content: center; white-space: nowrap to .authors-list-items messed up all the other Authors Lists, but with the individual class I was able to solve the problem.

Thank you very much for taking the time to support me!

Hi @ottfried

You’re welcome.

Happy to hear you found a solution. Sorry my suggestion didn’t work out.