How to center h1 in div

Question

How do i center a h1 in a div.This is the picture of my project and i want to center "about me" with hover effect to center it with header, to be right beneath that green line.

this

<!DOCTYPE html>
<html>
<head>
 <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="css/main.css">
 <title>My Portfolio</title>
</head>
<body>

 <div id="header">
  <header>Mr. Philip Braun</header>
  <img src="img/greeny.png">
  <h1 class="hvr-float-shadow">About  Me</h1>
  <br>
  <p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
 </div>

  <br><br>

 <img class="braun" src="img/braun3.jpg">

</body>
</html>

Possible duplicate of [CSS center text (horizontally and vertically) inside a div block](https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block) — Temani Afif, Dec 24 '17 at 13:15
https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div — Temani Afif, Dec 24 '17 at 13:17
https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css — Temani Afif, Dec 24 '17 at 13:18
https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css — Temani Afif, Dec 24 '17 at 13:18
For reference sake: https://codepen.io/UncaughtTypeError/pen/BmKMra (Horizontal Alignment) **&** https://codepen.io/UncaughtTypeError/pen/rYeRoR (Vertical Alignment) — UncaughtTypeError, Dec 24 '17 at 13:23

score 0 · Answer 1 · answered Dec 24 '17 at 13:18

h1{
    text-align:center;
}

<!DOCTYPE html>
<html>
<head>
 <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="css/main.css">
 <title>My Portfolio</title>
</head>
<body>

 <div id="header">
  <header>Mr. Philip Braun</header>
  <img src="img/greeny.png">
  <h1 class="hvr-float-shadow">About  Me</h1>
  <br>
  <p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
 </div>

  <br><br>

 <img class="braun" src="img/braun3.jpg">

</body>
</html>

score -1 · Answer 2 · answered Dec 24 '17 at 13:16

<!DOCTYPE html>
<html>
<head>
 <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
 <link rel="stylesheet" type="text/css" href="css/main.css">
 <title>My Portfolio</title>
</head>
<body>

 <div id="header">
  <header>Mr. Philip Braun</header>
  <img src="img/greeny.png">
  <h1 class="hvr-float-shadow" style="text-align:center">About  Me</h1>
  <br>
  <p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
 </div>

  <br><br>

 <img class="braun" src="img/braun3.jpg">

</body>
</html>

Using CSS, you can apply the text-align property to set the element to center through the inline method within the snippet I have provided or, through internal or external styling referring to either the class or element.

h1{
    text-align:center;
}

score -1 · Answer 3 · answered Dec 24 '17 at 13:22

-1

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <title>My Portfolio</title>
</head>
<body>

    <div id="header">
        <header>Mr. Philip Braun</header>
        <img src="img/greeny.png">
        <center>
                <h1 class="hvr-float-shadow">About  Me</h1>
            </center>
        <br>
        <p> I'm a funny and classy guy from London<br>and i dare you to click "About Me"<br>because if you don't, you are missing your chance of knowing about a guy<br>who works hard for what he is made and of course doing it<br> <b>perfectly<b><br> <b>with finesse</b> </p>
    </div>

        <br><br>

    <img class="braun" src="img/braun3.jpg">

</body>
</html>

This is the easiest way out to center the text.

answered Dec 24 '17 at 13:22

Darsh K

41
1
9

really ??!! center tag ! – Temani Afif Dec 24 '17 at 13:23
`it works` : please read the link above :) ... *This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.* – Temani Afif Dec 24 '17 at 13:35
1

Even in the given website, `` is compatible with almost all browsers – Darsh K Dec 24 '17 at 13:36
compatibility with browser is the trap ;) ... anyway, if you still want to use it, you are free. – Temani Afif Dec 24 '17 at 13:39
3

It has been deprecated in favour of the `text-align` property, it should not be used in production since at any point it may no longer be supported. Imagine updating your browser one fateful morning and seeing all elements, previously centered using the `center` tag, no longer centered. Best practice to simply avoid it and, as a better alternative, rather apply styles with no need to edit the DOM. – UncaughtTypeError Dec 24 '17 at 13:40
1

Will consider it. – Darsh K Dec 24 '17 at 13:43

How to center h1 in div

3 Answers3