22
Views
5
Comments
Solved
[CKEditor] [CKEditor] How to center image using built-in 'Image Properties'
ckeditor
Web icon
Forge asset by CKEditor Team
Application Type
Reactive

Hi,

How do i center an image using the CKEditor built-in image properties. I have tried inputting both center in 'Stylesheet Classes' and class: center in 'Style'.

Both doesn't work.


Thanks!


Screenshot 2024-03-14 160641.png
2024-03-14 12-00-57
Carlos Costa
Solution

Hi Jun,
But instead of right clicking and then image properties, you can just select the image and then hit the left arrow (that should bring the cursor to the left of the image) and then you can use the "center" element:

If you want, you can share an OML module.

2022-05-01 03-47-53
Jun Mun Chan

Hi Carlos,

Yes it's working now!

Do you happen to know how to make the image fit into the width of the screen? I am manually setting it to 517 at the moment.

Thanks!

2024-03-14 12-00-57
Carlos Costa
Solution

Nice ! 
Yes, in the advanced properties you can set the width to be 100%. Under the Advance tab > Style property > height:173px;width:100%;

That should make the width of the photo to be 100% of the available screen

Cheers

2024-03-14 12-00-57
Carlos Costa
Solution

Nice ! 
Yes, in the advanced properties you can set the width to be 100%. Under the Advance tab > Style property > height:173px;width:100%;

That should make the width of the photo to be 100% of the available screen

Cheers

2024-03-14 12-00-57
Carlos Costa

Hello Jun, 
If you select the photo and left arrow click, you can then select the "Center" option from CKEditor and it should be centered.

2022-05-01 03-47-53
Jun Mun Chan

Hi Carlos,

I was trying to look for this option too, however, after right click the image, i have this screen. The alignment option only has got 'left' and 'right'. Am not able to screen shot this part, as everytime i click away, the option list will be closed down.




Thanks!

2024-03-14 12-00-57
Carlos Costa
Solution

Hi Jun,
But instead of right clicking and then image properties, you can just select the image and then hit the left arrow (that should bring the cursor to the left of the image) and then you can use the "center" element:

If you want, you can share an OML module.

2022-05-01 03-47-53
Jun Mun Chan

Hi Carlos,

Yes it's working now!

Do you happen to know how to make the image fit into the width of the screen? I am manually setting it to 517 at the moment.

Thanks!

2024-03-14 12-00-57
Carlos Costa
Solution

Nice ! 
Yes, in the advanced properties you can set the width to be 100%. Under the Advance tab > Style property > height:173px;width:100%;

That should make the width of the photo to be 100% of the available screen

Cheers

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.