Can't Get the h1 tag to Center

HTML-CSS
1

Why is the h1 tag not centered? I thought that all I had to do was to set margin to auto and it would center.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centering Elements and Images</title>
    <style>
        h1  {
            margin:auto;
        }
        img {
            display: block;
            margin:auto;
        }
    </style>
</head>
<body>
    <h1>Swimwear From the Early 1900's</h1>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjCU04OCYmVdbJKsYpTCpkL2RiCuw_4UwZIg&usqp=CAU" alt="old time swimwear">
</body>
</html>
1 Like
2

Heading tags are block-level elements, which means it will occupy as much horizontal space as possible. If you look at it in your dev tools you’ll see that it takes up the entire width of the view port, so using auto margins on it won’t do anything. What you can do is center the text in the <h1> using text-align.

1 Like
3

Bear with me here, but I am assuming that you are referring to the Inspect Element section. From the little that I know about this part of the browser, I assume that you are looking at the Styles section and yes, I do see that the h1 and the image both occupy the entire width.
Since the img element did get centered, I guess that it is not a block level element and thus is good with the margin: auto command to center it.

Screen Shot 2021-01-04 at 6.53.40 PM
Screen Shot 2021-01-04 at 6.53.40 PM1498×492 46.6 KB

4

You are correct, the <img> tag is inline by default and so auto side margins will center it.

And yes, the Inspector is what I was referring to. Get used to using that and all the other developer tools provided by the browser. They are going to be your best friends.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.