CODEWITHSUNDEEP
htmlcss
Razvan Meriniuc
Razvan Meriniuc

Reputation: 182

Margin: auto does not work

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Meriniuc Răzvan - Dumitru</title>
    </head>
    <body>
        <div class="left"></div>
        <div class="right"></div>
        <div id="header">
            <h3>
                Cv
            </h3>
        </div>
        <div id="footer"></div>

    </body>
</html>

.left {
    border-radius: 10px;
    background-color: green;
    height: 310px;
    width: 75px;
    float: left;
    margin-top: 65px;
}

.right {
    border-radius: 10px;
    background-color: blue;
    height: 310px;
    width: 50px;
    float: right;
    margin-top: 65px;
}

#header {
    position: fixed;
    height: 65px;
    background-color: red;
    width: 720px;
    border-radius: 10px;
    display: block;

}

#footer {
    clear: both;
    height: 65px;
    width: 720px;
    background-color: black;
    border-radius: 10px;
}

h3 {
    margin: auto;
}

With "margin:auto" With "margin:auto". Without "margin:auto" Without "margin:auto"

I am learning HTML and CSS and have tried to create a CV page, but my header won't center. I have read about this problem and the general solution seems to make the header display as a block, but it still doesn't work. Could you please explain why this code does not center my header and offer a possible solution? Thank you in advance!

Upvotes: 1

Views: 99

Answers (2)

TheOnlyError
TheOnlyError

Reputation: 1451

Use text-align: center; The h3 tag contains text.

h3 {
    text-align: center;
}

Upvotes: 1

Quentin
Quentin

Reputation: 943217

Auto margins centre the element. They don't centre the inline content of it.

The header is centred. The text "Cv" is aligned to the left of the header.

To centre that, use text-align.

Upvotes: 4

Related Questions