CODEWITHSUNDEEP
htmlcss
user3831011
user3831011

Reputation: 309

how to center inline elements

What I am trying to do is center my title in the middle of the page. It is inline with the search bar and is centering based off of the distance from the edge of the search bar to the other side. How can I make it so it ignores where the search bar is? https://jsfiddle.net/nyvxhb4h/, so in the jsfiddle the nav menu is centered, so the title should be right above it. Thanks -Kyle

Here is the problem area I think incase jsfiddle link stops working: 

#head {
    margin: 2% auto 2% auto;
    text-align: center;
}

#head h1 {
    display: inline;
}

<div id="head">
    <h1> Title </h1>
    <form action="test.asp" style="float:right; margin-right: 3%;">
        <input type="text">
    </form>
</div>

Upvotes: 1

Views: 448

Answers (1)

Shawn Jacobson
Shawn Jacobson

Reputation: 1352

Move your form before the h1 and update its CSS to position:absolute; right:0. https://jsfiddle.net/nyvxhb4h/1/

<div id="head">
    <form action="test.asp" style="position:absolute; right:0; margin-right: 3%;">
        <input type="text">
    </form>
    <h1> Title </h1>
</div>

Upvotes: 1

Related Questions