CODEWITHSUNDEEP
htmlcss
smeeb
smeeb

Reputation: 29537

Forcing CSS style attribute to center elements on a page

I have a scenario where I have a complex web app that uses a lot of CSS/JS frameworks/libs and a <div> on one of my pages isn't rendering correctly.

Here's my code snippet, but I unfortunately can't provide a full code example because of the numerous JS/CSS frameworks involved:

<body>
    <div style="margin: 0 auto;" id="centerme">
        <h1 style="margin: 0 auto;">You'll need an invitation to access<br/>retailer connection setups</h1>

        <div style="margin: 0 auto;" class="well">
            <h2>How can I get such wow?</h2>
            <h3>
                It looks like you need much amaze.
            </h3>
        </div>

        <h3>For reals? Rejoice!</h3>
    </div>
</body>

So what I'm trying to do is center everything inside the centerme div horizontally. Currently the above attempt isn't working, but according to CSS Tricks, I just need to apply the following style to my div:

.centerme {
    margin: 0 auto;
}

Now it is my understanding that any style attribute I apply to any HTML element will always take precedence over other styles/rules governing that element, yes?!? So why then is it not taking precedence in my code?

In other words: What style attributes can I set that will force the browser to center my div no matter what other rules have been defined?

Upvotes: 1

Views: 80

Answers (3)

Sebastian
Sebastian

Reputation: 344

Your selector is an ID <div style="margin: 0 auto;" id="centerme">

but you pointed as a class .centerme {}

You must use # to point an ID #centerme {}

Also #centerme must have a defined width

example:

#centerme {
    width: 90%;
    margin: 0 auto;
}

Upvotes: 1

Stickers
Stickers

Reputation: 78716

If you want to center dynamic width element, you could either:

.centerme {
  display: table; /*shrink-to-fit*/
  margin: 0 auto;
}
<div class="centerme">yes</div>

or:

.container {
  text-align: center;
}
.container .centerme {
  text-align: left; /*reset if necessary*/
  display: inline-block;
}
<div class="container">
  <div class="centerme">yes</div>
</div>

Upvotes: 2

Hunter Turner
Hunter Turner

Reputation: 6894

Your div needs to have a defined width for the margin auto to work:

Set Width:

#centerme {
    margin: 0 auto;
    width: 500px;
}

Upvotes: 2

Related Questions