Centering two divs with css

Question

There is definitely an easy response, but I cannot get both divs to center. I used inline blocks, floats and I even tried to use a CSS grid. I need the dollars sign to be separate from the number because I want to have a jQuery effect on the number but if I include the dollar sign it does not recognize it as a number.

I just want both divs to be centered across the screen.

text-align: center; does not seem to work

#dollar_sign {
  display: inline-block;
  margin: 0 auto;
  font-size: 150px;
  color: rgb(0, 255, 0);
}

#num {
  display: inline-block;
  margin: 0 auto;
  font-size: 150px;
  color: rgb(0, 255, 0);
}

<div id="big_number">
  <div id="dollar_sign">$</div>
  <div id="num">1,000,000</div>
</div>
<div style="clear: both;"></div>

Where is the CSS you are using to try to center the divs? I see no code where you are even trying to do it... — FluffyKitten, Jul 17 '20 at 18:58
@FluffyKitten looks like OP was trying to use `margin: 0 auto` to do it. — disinfor, Jul 17 '20 at 19:00
When you use `inline-block`, you put the `text-align:center` in the *container* not the divs themselves. — FluffyKitten, Jul 17 '20 at 19:02
@disinfor isn't `margin: auto` the default for `inline-block` elements anyway? — FluffyKitten, Jul 17 '20 at 19:04
@FluffyKitten No, it's computed on the box model as `0`, but there is not an actual value assigned to margin, since the *inside* of an inline-block element is calculated as a block level element, but the *outside* is computed as an inline element. — disinfor, Jul 17 '20 at 19:25
I couldn't find the duplicate question (I knew there was one) - so thanks to Temani and Fluffy - for closing. — disinfor, Jul 17 '20 at 19:26
@disinfor If an `inline-block` element (with no margin set) is inside a block container that has `text-align:center`, the inner element gets centred - so that suggested to me that margin-auto was default in this situation... but anyway, question is answered so it doesn't matter :) — FluffyKitten, Jul 17 '20 at 19:32
That's because an `inline-block` element on the OUTSIDE is calculated as an inline element, so `text-align: center` will center that element as if it's inline. `inline-block` elements have no margin default. But, yeah, question answered! hah! — disinfor, Jul 17 '20 at 19:46
Thanks @disinfor - that means "by default" for this situation to me! :) — FluffyKitten, Jul 17 '20 at 20:29

Vijay Palaskar · Answer 1 · 2020-07-18T09:32:00.237

Use flexbox

#big_number {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#dollar_sign {
    font-size: 150px;
    color: rgb(0, 255, 0);
}

#num {
    font-size: 150px;
    color: rgb(0, 255, 0);
}

<div id="big_number">
    <div id="dollar_sign">$</div>
    <div id="num">1,000,000</div>
</div>
<div style="clear: both;"></div>

Reference https://www.w3schools.com/css/css3_flexbox.asp

score 2 · Answer 2 · answered Jul 17 '20 at 18:58

You can use flex for this:

#big_number {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

#dollar_sign {
  font-size: 150px;
  color: rgb(0, 255, 0);
}

#num {
  font-size: 150px;
  color: rgb(0, 255, 0);
}

<div id="big_number">
  <div id="dollar_sign">$</div>
  <div id="num">1,000,000</div>
</div>
<div style="clear: both;"></div>

Basically, set the flex-row to not wrap and then justify the content to the center.

Some good reading on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Thanks for the tip! Was playing around with the code for much longer than I want to admit. — Eugene Rozental, Jul 17 '20 at 19:03

score 0 · Answer 3 · answered Jul 17 '20 at 19:01

#big_number {text-align: center;}

Add this to your CSS should fix it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- || METADATA || -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- || STYLESHEETS || -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      <!--
      Page
      title
      --
    />
    <title>Title</title>

    <!-- || CSS || -->
    <style>
      #dollar_sign {
        display: inline-block;
        margin: 0 auto;
        font-size: 150px;
        color: rgb(0, 255, 0);
      }
      #num {
        display: inline-block;
        margin: 0 auto;
        font-size: 150px;
        color: rgb(0, 255, 0);
      }
      #big_number {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <!-- || BODY || -->
    <div id="big_number">
      <div id="dollar_sign">$</div>
      <div id="num">1,000,000</div>
    </div>
    <div style="clear: both;"></div>
  </body>
</html>

score 0 · Answer 4 · answered Jul 17 '20 at 19:10

#big_number {
    margin: auto;
    text-align: center;
}

#dollar_sign {
    display: inline-block;
    margin: 0 auto;
    font-size: 15px;
    color: rgb(0, 255, 0);
}
#num {
    display: inline-block;
    margin: 0 auto;
    font-size: 15px;
    color: rgb(0, 255, 0);
}

you only need to:

#big_number {
    margin: auto;
    text-align: center;
}

Centering two divs with css

4 Answers4