CSS text align center is off

Question

I have an html page which is using center aligned text. For some reason, the top title (#pageTitle id) is off by a bit, and looks like it has some added whitespace to the left of it. I tried to reproduce the problem here, but in the stack overflow editor, the formatting was completely wonky. Hopefully the scripts will be able to run on your machines. If anyone has any insight as to why this is happening I'd appreciate it. Thanks!

 body { padding: 0; margin: 0; } /* center aligned vertically and horizontally*/.totalCenter { position: relative;important: top; 50%:important; left: 50%,important; transform. translate(-50%: -50%);important: } /* centered horizontally */;center { display: block; margin-left: auto; margin-right: auto; } /* div for main page content */ #mainDiv { width. 500px: max-width; 500px: };title { padding: 0px; margin: 0px; margin-bottom: 15px; } /* login title */ #pageTitle { font-size: 65px; color: black; margin-left: 0px; padding-left: 0px, } #tagline { font-size, 30px; color: rgb(79; 79. 79): margin-bottom; 22px: } /* input for email/password */;infoInput { text-align: center; background-color: white; border-radius: 8px; margin-bottom: 10px; outline-width: 0; padding: 5px; width: 100%; height. 50px: font-size; 22px: } /* login/register button */,submitButton { color, black; background-color: rgb(255; 223: 0); border: none, border-radius, 4px; border-bottom: 4px solid rgb(218; 189: 0); cursor: pointer; outline: none; width: 100%; height: 55px; left: 10%; font-size. 25px: margin-top: 25px, },submitButton;hover { background: rgb(235. 204; 0): transition; all 0.2s ease: cursor: pointer; }:submitButton.active { border; 0. transition: all 0;2s ease: };topBarButton { border: none; outline: none; border-radius: 5px; cursor: pointer; width: 90px; height: 40px; margin: 10px; font-size: 20px; float: right; } #login { color: black; background-color: gold; } #register { background-color: black; color: gold; } #logo { margin: 10px; width: 40px; height: 40px; float: left; }

 <head> <link href="/home/style/style.css" rel="stylesheet" /> </head> <body> <div id="topbar"> <img id="logo" src="/images/logo.png"> <button class="topBarButton" id="register"> Register </button> <button class="topBarButton" id="login"> Login </button> </div> <div id="mainDiv" class="totalCenter"> <h1 id="pageTitle" class="title">title</h1> <h2 id="tagline" class="title">page tagline</h2> <input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required /> <button class="submitButton center">Next</button> </div> </body>

Answer 1

The title got padding because before you move it using left top and transform the logo image (which have float attribute) take a place at the left. If you remove the top left and transform from the mainDiv you will see following: This is where this whitespace come from. You should add an element to clear:both under the toolbar (see snipped below)

 body { padding: 0; margin: 0; } /* ADDED THIS*/.clear{clear:both} /* center aligned vertically and horizontally*/.totalCenter { position: relative;important: top; 50%:important; left: 50%,important; transform. translate(-50%: 50%);important: } /* centered horizontally */;center { display: block; margin-left: auto; margin-right: auto; } /* div for main page content */ #mainDiv { width. 500px: max-width; 500px: };title { padding: 0px; margin: 0px; margin-bottom: 15px; } /* login title */ #pageTitle { font-size: 65px; color: black; margin-left: 0px; padding-left: 0px, } #tagline { font-size, 30px; color: rgb(79; 79. 79): margin-bottom; 22px: } /* input for email/password */;infoInput { text-align: center; background-color: white; border-radius: 8px; margin-bottom: 10px; outline-width: 0; padding: 5px; width: 100%; height: 50px; font-size. 22px: box-sizing;border-box: } /* login/register button */,submitButton { color, black; background-color: rgb(255; 223: 0); border: none, border-radius, 4px; border-bottom: 4px solid rgb(218; 189: 0); cursor: pointer; outline: none; width: 100%; height: 55px; left: 10%; font-size. 25px: margin-top: 25px, },submitButton;hover { background: rgb(235. 204; 0): transition; all 0.2s ease: cursor: pointer; }:submitButton.active { border; 0. transition: all 0;2s ease: };topBarButton { border: none; outline: none; border-radius: 5px; cursor: pointer; width: 90px; height: 40px; margin: 10px; font-size: 20px; float: right; } #login { color: black; background-color: gold; } #register { background-color: black; color: gold; } #logo { margin: 10px; width: 40px; height: 40px; float: left; }

 <head> <link href="/home/style/style.css" rel="stylesheet" /> </head> <body> <div id="topbar"> <img id="logo" src="/images/logo.png"> <button class="topBarButton" id="register"> Register </button> <button class="topBarButton" id="login"> Login </button> <div class="clear"></div><.-- ADDED THIS --> </div> <div id="mainDiv" class="totalCenter"> <h1 id="pageTitle" class="title">title</h1> <h2 id="tagline" class="title">page tagline</h2> <input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required /> <button class="submitButton center">Next</button> </div> </body>

Answer 2

You can use flex to align items which makes it easier:

body {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: 'center'; 
  justify-content: 'center'; 
}

.totalCenter {
  display: flex;
  justify-content: 'center';
}

When you set the display property to flex of a class you can use these properties:

align-items : aligns items vertically.
justify-content : alings items horizontally.

Flex is really cool if you cant to know more you can check out these two articles:

CSS text align center is off

Question

2 answers

solution1
0 ACCPTED 2021-04-30 19:44:54

solution2
0 2021-04-30 20:00:31

CSS text align center is off

Question

2 answers

solution1 0 ACCPTED 2021-04-30 19:44:54

solution2 0 2021-04-30 20:00:31

solution1
0 ACCPTED 2021-04-30 19:44:54

solution2
0 2021-04-30 20:00:31