Centering image inside Item Body of Accordion component does not work?

Bootstrap Studio Help
1

Hi, I am centering image as follows:

centered {
  display: block;
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 16px;
  margin-bottom: 16px;
}

This works as intended for images in a Div directly under a Tab Pane, but not for images inside a Div that is inside the Item Body of an Accordion component? Why? The rest works, such as the max-width property, but not the centering on these images. What am I doing wrong here?

2

PS. When I put the Image inside a Paragraph element with the Alignment set to centered, the centering works, but as soon as I try to attach a CCS class to set its size as in my first post, the centering is undone. This is due to the "Display: block" setting of the img.centered class I first used. removing that setting, and putting all the Images in an empty Paragraph seems to work.

3

Well, you don't need to write CSS to center an image in an accordion.

If you select the Accordion > Item Content component, go to the Options Panel > Text Options and choose Alignment center, your paragraph and Div with the image in it will be centered. Then you can select the Paragraph component and set the text alignment as you desire. The image size can be set through the Options > Image Options > Width.

But if you want to do it with a CSS class, I don't see any reason why it wouldn't work (other than the fact that you're missing a period in front of your class name.) You're applying the class to the image, and not the div, correct?

4

Thanks. As I wrote earlier, the "Display: block" attribute was causing problems, so I disabled that one. It works now, although a little bit artificially (need to put the image inside a Paragraph element...)

5

@diracsbracket

You do not have to put the image inside the paragraph element, nor do you need to write any custom CSS to center or size it.

See for yourself...

enter image description here