[Support request] centering a div element – css not working

[Cynthia]

I am trying to center an image slider widget on an event page. (it’s located at the bottom of the event page in the content section) I created a class for the div but the CSS I am using doesn’t seem to be working. The width element below only resizes the size of the image slider, but doesn’t move it to the center. It is currently aligned to the left on laptop view.

.centerdiv {
  margin: auto;
width: 80%;
border: 4px solid #77377C;
padding-left: 0px;

}

@media (max-width: 768px){
.centerdiv {
  margin: auto;
width: 100%;
border: 4px solid #77377C;
padding-left: 0px;
}}

[Ying]

Hi there,

The HTML of the centerdiv element has an error, there’s a missing ” at the end of the inline CSS:
https://www.screencast.com/t/mIduoPLH7

And try using margin-left:auto; margin-right:auto; instead of text-align:center;

[Cynthia]

Hi Ying

I corrected that error but that did not fix the centering issue. Can you please have another look and let me know what CSS will make it move to the center.

Thank you

[Fernando]

Hi Cynthia,

Try replacing the CSS you currently have for this with this:

@media (min-width: 769px) {
    .centerdiv {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}

.centerdiv {
    border: 4px solid #77377C;
    padding-left: 0px;
}

Let us know how it goes.

[Author]

Posts