CODEWITHSUNDEEP
htmlcss
user9840905
user9840905

Reputation:

Aligning inputs/buttons in html/css navbar

I am fairly new to html and css and I can not get this login centered in my nav-bar. I have tried using vertical-align, margin, and plenty of other things. Even when I seem to get either the inputs of the button centered with margin, It pulls the other element out of place. I need the inputs and button to be centered vertically in my header itself and aligned vertically with each other.

The Unaligned Navbar Itself 

ul {
  margin: 0;
  padding: 0;
}

header a.home {
  background-color: #ff6961;
  color: black;
}

header {
  background-color: #222;
  overflow: hidden;
}

header ul li {
  list-style-type: none;
}

header ul li a {
  text-decoration: none;
  display: block;
  padding: 18px 20px;
  font-size: 17px;
  text-align: center;
  color: #f2f2f2;
  float: left;
}

input {
  background-color: #444;
  border: 0;
  padding: 10px 12px;
}

input,
select,
textarea {
  color: #ff6961;
}

header div.login button {
  font-size: 18px;
  text-align: center;
  background: #ff6961;
  border: 0;
  padding: 10px;
}

header div.login {
  float: right;
  margin-top: 10px;
}
<header>
  <ul>
    <li><a class="home" href="/index.php">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
  <div class="login">
    <input type="text" name="usr" placeholder="Username">
    <input type="password" name="pwd" placeholder="Password">
    <button type="submit" name="submit">Submit</button>
  </div>
</header>
<section>
  <!-- Actual Site Code Here -->
</section>

Upvotes: 0

Views: 446

Answers (2)

nalgenes
nalgenes

Reputation: 370

Just change the margin-top of header div.login to 5 px

header div.login {
  float: right;
  margin-top: 5px;
}

EDIT: Here is a full snippet of the code

https://jsfiddle.net/master4709/jacbf6r1/

Upvotes: 0

Brett Commandeur
Brett Commandeur

Reputation: 590

Flexbox is handy for this:

.login {
  display: flex;
  align-items: center;
}


ul {
margin: 0;
padding: 0;
}

header a.home {
    background-color: #ff6961;
    color: black;
}

header {
    background-color: #222;
    overflow: hidden;
}

header ul li {
    list-style-type: none;
}

header ul li a {
    text-decoration: none;
    display: block;
    padding: 18px 20px;
    font-size: 17px;
    text-align: center;
    color: #f2f2f2;
    float: left;
}

input {
    background-color: #444;
    border: 0;
    padding: 10px 12px;
}

input, select, textarea {
    color: #ff6961;
}

header div.login button {
    font-size: 18px;
    text-align: center;
    background: #ff6961;
    border: 0;
    padding: 10px;
}

header div.login {
    float: right;
    margin-top: 10px;
}

.login {
  display: flex;
  align-items: center;
}
<header>
        <ul>
            <li><a class="home" href="/index.php">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
        <div class="login">
            <input type="text" name="usr" placeholder="Username">
            <input type="password" name="pwd" placeholder="Password">
            <button type="submit" name="submit">Submit</button>
        </div>
    </header>
    <section>
        <!-- Actual Site Code Here -->
    </section>

Upvotes: 2

Related Questions