Streaming live at 10am (PST)

Forcing images/figures in richtexts to be centered


#1

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!


#2

Your read only link is broken.


#3

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:
https://www.w3schools.com/css/css_rwd_images.asp

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.


#4

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


#5

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:


#6

Here’s how to get the correct read only link

Posting Guidelines for the Code Help Category


#7

Gottcha. Here is the read-only-link.


#8

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;
}

#9

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:


#10

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).


#11

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