How do I center this element on the page? I can only center the text within colored background

Question

It creates exactly what I need but I cannot center to whole element on the page. centering will only center the text within the background colored area. What am I doing wrong?

I tried many different code combination but cannot make this work.

GROW YOUR BUSINESS WITH US

<h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px;">GROW YOUR BUSINESS WITH US</h1>

I would like whole element above to be centered on the page.

Display block, `margin: auto`, there are lots of questions on this, please do a search on google — Huangism, Jan 14 '19 at 18:08
Possible duplicate of [How to center an element horizontally and vertically?](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — Huangism, Jan 14 '19 at 18:15

score 1 · Answer 1 · answered Jan 14 '19 at 18:38

You also could just change the display attr to block and add margin:auto to it! I placed it into a div with 1000px width for you to view, but you just need the h1

<div style="width:1000px;">

<h1 style="display: block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin:auto;">GROW YOUR BUSINESS WITH US</h1>

</div>

Tony Dong · Answer 2 · 2019-01-14T18:18:18.653

0

You can add div around H1 and add width and margin:auto like

<div style="width:650px; margin: auto;"><h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; ">GROW YOUR BUSINESS WITH US</h1><div>

Or like Huangism do

<h1 style="text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin: auto;">GROW YOUR BUSINESS WITH US</h1>

edited Jan 14 '19 at 18:18

answered Jan 14 '19 at 18:11

Tony Dong

3,213
1
29
32

The display block does not need to be on there, I only comment on it because the OP has inline-block. Wrapping the element is totally unnecessary – Huangism Jan 14 '19 at 18:16
Like Huangism said, I removed display:block and also works. Thanks Huangism – Tony Dong Jan 14 '19 at 18:19

score 0 · Answer 3 · answered Jan 14 '19 at 18:26

here is an example

.container{
    width: 100%;
    height: 100%;
    border: 1px red solid;
    display: inline-block;
    height: 90vw;

}

.container > div{
    width: 150px; /* very impotent */
    margin:auto;/* center position */
    border:1px #CCC solid;
    text-align:center;
}

<div class="container">
<div> center div </div>
</div>

How do I center this element on the page? I can only center the text within colored background

3 Answers3