Forcing images/figures in richtexts to be centered

Hey Guys,

does anybody know, why it is not possible to center all images inside of richtext-blocks? Tried to force the figure element to be centered, but if I set an image to be float left … it still floats left :frowning:

Is it a restriction by webflows code-overwrites? And is there a way to force all figures inside of richtexts to be centered, or at least 100% width?

Thank you!

Your read only link is broken.

The richtext don’t add any styles for you. Global styles: Try this trick (Ctr + F - go to “Advanced styling”):

What style to add?
This is very useful/common:

img & text-align

text-align property applies to block containers (img is inline)

You can not center the image by text-align (Add text-align for the “wrapper” like div, h1-6, p etc.)

Last - “float: left” to center content :slight_smile: Sounds very wierd.

Sorry, that read only link was pasted automatically. Here is correct Link.

Thank you for your answer, but I do actually know how to custom-style my RTEs. To further explain what I want to achieve with the float-thing:

Customers editing richtext-content should not be able to paste images that float left, or right. So i tried to force the float left and float right images to be always centered by styling their figure-container to be 100% width or to have an auto margin to be aligned in the middle.

As you can see here it does not really work. In the editor I set the image to float left (like my customer would do) and in the final layout it floats left, even if I set the figure to be centered via margins.

I hope I could somehow explain my strange trouble here :slight_smile:

Here’s how to get the correct read only link

Posting Guidelines for the Code Help Category

Gottcha. Here is the read-only-link.

Now i understand (It was really hard to know your meaning). You talk about this feature:
image

Why not tell the client to not use floats? (It’s like saying “how to remove bold text”).

By custom code add this (Again this is not too much elegant):

.richtext-master figure.w-richtext-align-floatleft{
    text-align: center;
}

.richtext-master figure.w-richtext-align-floatright{
    text-align: center;
}

Yeah sorry it was kind of hard to explain … We are doing this on purpose to minimize potential mistakes on the editors side, because it is too complex for them to understand anything about floats (F.Y.I: We also changed H1-H6 to look the same, because the editors don’t get the difference) :wink:

OK. Try my code. Anyway, no way to remove this feature from the editor (“Build-in”). Tell the client about this code (1 year from now it will be hard to find "why the float-left not working).

Works like a charm :slight_smile: Thank you for this!

1 Like

Hi all,

Quick question: I’ve created button in a Webflow article using HTML custom code. Alignment isn’t the way I want. See attached. I want it to align in the center of the text (above and below). I believe it might be constrained by the parameters of the article template.

Any suggestion on how to align the button?