Archived topic

centering a div element - css not working

3 replies · Started by Cynthia on December 14, 2022

Viewing posts 1–4 of 4

December 14, 2022 at 1:43 pm #2462121

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

December 14, 2022 at 3:09 pm #2462178

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;

December 14, 2022 at 5:07 pm #2462238

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

December 14, 2022 at 6:19 pm #2462260

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.

This archived topic is closed to new replies.

Start building better websites today.