-1

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>

Improve this question
9
  • 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... Commented Jul 17, 2020 at 18:58
  • @FluffyKitten looks like OP was trying to use margin: 0 auto to do it. Commented Jul 17, 2020 at 19:00
  • When you use inline-block, you put the text-align:center in the container not the divs themselves. Commented Jul 17, 2020 at 19:02
  • @disinfor isn't margin: auto the default for inline-block elements anyway? Commented Jul 17, 2020 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. Commented Jul 17, 2020 at 19:25

4 Answers 4

Reset to default
2

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for the tip! Was playing around with the code for much longer than I want to admit.
2

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

Improve this answer

Comments

0 
#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>

Improve this answer

Comments

0 
#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; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.