0

text-align:center; not working. the text "hello" starts on the right side of the page and not the center. i need the text to be placed right exactly on the middle of the page. pls help and thanks.

body {
  padding: 0;
  margin: 0;
  background: #ffd200;
}

h1 {
  font-size;
  10em;
  padding: 0 auto;
  margin: 0 auto;
  text-align: center;
  font-family: 'arial';
  position: absolute;
  top: 50%;
  bottom: 50%;
  right: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%)
}
<h1>hello</h1>
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Andrew Mercurio
  • 3
  • 3

2 Answers2

0

if you want to vertically align in center also use flex

use flex properties //

  h1 {
    display:flex;
    justify-content:center;
    align-items:center;
    just use text-align;
    }

for horizontal align

 body {
      padding: 0;
      margin: 0;
      background: #ffd200;
    }

    h1 {
      font-size: 10em;
      text-align: center;
      font-family: 'arial';
    }

<!-- language: lang-html -->

    <h1>hello</h1>

<!-- end snippet -->
salik saleem
  • 769
  • 5
  • 25
-1

Try this (updated): http://jsfiddle.net/ody9tfrn/6/

body {
  padding: 0;
  margin: 0;
  background: #ffd200;
}

h1 {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; 
  align-items: center; 
}
<h1>test</h1>
BlackLotus
  • 318
  • 4
  • 12
  • I turned your code into a live demo, it doesn't work. – Quentin Nov 22 '21 at 11:30
  • Are you sure about that, i tried and it worked, look at this: http://jsfiddle.net/ody9tfrn/3/ – BlackLotus Nov 22 '21 at 11:35
  • The tiny font size there conceals the problem. Make the font size larger or use the demo here on Stackoverflow where it already is a decent size. The top left corner of the text is in the middle of the page when the middle of the text should be in the middle of the page. – Quentin Nov 22 '21 at 11:37
  • I see, sorry about that. You can try flexbox. Demo: http://jsfiddle.net/ody9tfrn/6/ – BlackLotus Nov 22 '21 at 11:56