Centered Element

Question

I Am Started Learning HTML And CSS And I Wanna Know: How i Could Make This links Home And About And Contact Centered In Header

Html:

 <body>
    <header>
        
        <h1><a href="#">HBT</a> </h1>
        <nav>

            
                <a href="./home.html">Home</a>
                <a href="./about.html">About</a>
                <a href="./contact.html">Contact</a>
            
        </nav>
    </header>
</body>

Style:


*{
    margin:0;
    
}

header{
    background-color:#000;
overflow: hidden;
height:90px;
}

header h1{
    float :left;
}
header nav a{
    float :right;
    padding:10px;
}

Answer 1

Since <a> is an inline element, you will need to convert that into block element. Further, padding isn't your option here because. You will need 100% height.

a {
    color: #fff;
    display: block;
    height: 100%;
    background: red;
}

Centered Element

Question

1 answers

solution1
1 2021-01-14 09:21:11

Centered Element

Question

1 answers

solution1 1 2021-01-14 09:21:11

solution1
1 2021-01-14 09:21:11