What is the best way to vertically center a floated input element within a fixed div?

Question

What is the best way to vertically center a floated input element within a fixed div?

Looking for some assistance with centering the input elements in the top div of a simple Webshop I'm creating.

HTML/CSS

body {
  margin: 0;
  background: lightcyan;
}

.top {
  position: fixed;
  background: lightblue;
  width: 100%;
}

.top img {
  width: 80px;
  float: left;
}

.top h1 {
  float: left;
}

.top form {
  float: right;
  height: 100%;
}

.top form input {
  display: block;
  float: right;
}

<html>

<head>
  <title>Webshop</title>
</head>

<body>
  <div class="top">
    <img src="ImageUsed.png">
    <h1>Webshop Title</h1>
    <form>
      <input type="submit" value="register">
      <input type="submit" value="login">
    </form>
  </div>
</body>

</html>

The alignment of the div, img, and h1 elements is on point, but I'm struggling to vertically center the two input elements within the form element inside the div. Any suggestions on how to achieve this?

html css flexbox

Answer 1

Answer №1

Eliminate all floats as they become unnecessary when utilizing flexbox. Assign flex to both top and your <form>, then utilize align-items: center;.

I have also introduced an additional div to enclose your img and h1, applying flex properties to ensure they are displayed next to each other using space-between on the top element.

body {
  margin: 0;
  background: lightcyan;
}

.top {
  position: fixed;
  background: lightblue;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top img {
  width: 80px;
}

form,
.top > div:nth-child(1) {
  display: flex;
  align-items: center;
}

.top form {
  height: 100%;
}

.top form input {
  display: block;
}

<html>

<head>
  <title>Webshop</title>
</head>

<body>
  <div class="top">
  <div>
    <img src="ImageUsed.png">
    <h1>Webshop Title</h1>
  </div>
    <form>
      <input type="submit" value="register">
      <input type="submit" value="login">
    </form>
  </div>
</body>

</html>

Answer 2

Eliminate all floats as they become unnecessary when utilizing flexbox. Assign flex to both top and your <form>, then utilize align-items: center;.

I have also introduced an additional div to enclose your img and h1, applying flex properties to ensure they are displayed next to each other using space-between on the top element.

body {
  margin: 0;
  background: lightcyan;
}

.top {
  position: fixed;
  background: lightblue;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top img {
  width: 80px;
}

form,
.top > div:nth-child(1) {
  display: flex;
  align-items: center;
}

.top form {
  height: 100%;
}

.top form input {
  display: block;
}

<html>

<head>
  <title>Webshop</title>
</head>

<body>
  <div class="top">
  <div>
    <img src="ImageUsed.png">
    <h1>Webshop Title</h1>
  </div>
    <form>
      <input type="submit" value="register">
      <input type="submit" value="login">
    </form>
  </div>
</body>

</html>

Answer 3

Answer №2

Utilize flexbox over floats for better alignment of elements along a single axis.

<style>
    body{
    margin: 0;
    background: lightcyan;
  }
  .top{
    position: fixed;
    background: lightblue;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .top h1{
    margin-right: auto;
  }

  .top form input{
   display: block;
   float: right;
  }
</style>

<html>
  <head>
    <title>Webshop</title>
  </head>
  <body>
    <div class="top">
      <img src="ImageUsed.png">
      <h1>Webshop Title</h1>
      <form>
        <input type="submit" value="register">
        <input type="submit" value="login">
      </form>
    </div>
  </body>
</html>

Answer 4

Utilize flexbox over floats for better alignment of elements along a single axis.

<style>
    body{
    margin: 0;
    background: lightcyan;
  }
  .top{
    position: fixed;
    background: lightblue;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .top h1{
    margin-right: auto;
  }

  .top form input{
   display: block;
   float: right;
  }
</style>

<html>
  <head>
    <title>Webshop</title>
  </head>
  <body>
    <div class="top">
      <img src="ImageUsed.png">
      <h1>Webshop Title</h1>
      <form>
        <input type="submit" value="register">
        <input type="submit" value="login">
      </form>
    </div>
  </body>
</html>

Answer 5

Answer №3

Utilizing flexbox simplifies the layout

.header {
  position: fixed;
  background: skyblue;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

Answer 6

Utilizing flexbox simplifies the layout

.header {
  position: fixed;
  background: skyblue;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

Answer 7

Answer №4

To center a fixed-position header vertically with a fixed height and relative position, you can apply position: absolute;, top: 50%, and translateY(-50%) to the parent element of input elements. Additionally, use right: 0 instead of float: right for alignment:

body{
    margin: 0;
    background: lightcyan;
  }
  .top{
    position: fixed;
    background: lightblue;
    width: 100%;
    height: 80px;
    position: relative;
  }
  .top img{
    width: 80px;
    float: left;
  }
  .top h1{
    float: left;
  }
  .top form{
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .top form input{
    display: block;
    float: right;
  }

<html>
  <head>
    <title>Webshop</title>
  </head>
  <body>
    <div class="top">
      <img src="ImageUsed.png">
      <h1>Webshop Title</h1>
      <form>
        <input type="submit" value="register">
        <input type="submit" value="login">
      </form>
    </div>
  </body>
</html>

Answer 8

To center a fixed-position header vertically with a fixed height and relative position, you can apply position: absolute;, top: 50%, and translateY(-50%) to the parent element of input elements. Additionally, use right: 0 instead of float: right for alignment:

body{
    margin: 0;
    background: lightcyan;
  }
  .top{
    position: fixed;
    background: lightblue;
    width: 100%;
    height: 80px;
    position: relative;
  }
  .top img{
    width: 80px;
    float: left;
  }
  .top h1{
    float: left;
  }
  .top form{
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .top form input{
    display: block;
    float: right;
  }

<html>
  <head>
    <title>Webshop</title>
  </head>
  <body>
    <div class="top">
      <img src="ImageUsed.png">
      <h1>Webshop Title</h1>
      <form>
        <input type="submit" value="register">
        <input type="submit" value="login">
      </form>
    </div>
  </body>
</html>

What is the best way to vertically center a floated input element within a fixed div?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Change background according to URL query

Activate the selected image on click and deactivate all other images

Eliminate XML namespaces from HTML content generated through XSL in PHP

Stylize the div within the hyperlink when hovering over it

Failure to connect HTML and CSS files

"Step-by-step guide on triggering the ng-click function for the first row within an ng

An alternative in the Android platform that simulates the functionality of CompositeOperation in

Issue with Bootstrap 5: bg-customcolor and text-customcolor classes are not functioning as expected

Struggling to implement Bootstrap in my code

Tips for restricting search results in Angular12

What is the best approach to implement a basic image upload functionality?

The fixed navbar in Bootstrap is missing a bottom margin

Media queries in CSS appear to be dysfunctional when used on Microsoft Edge

Mall magnitude miscalculation

Discover the method to retrieve HTML content by sending an HTTP POST request in AngularJS, similar to loading content

Can you explain the guidelines for overlapping CSS media queries?

Difficulty displaying background image on iOS devices like iPhone and iPad

Anchor tag images are not functioning as clickable links

Ways to verify if the length of a string is zero in Angular JS

I struggle with generating a transition effect in the input box through label transformation