How can I center a floated input element vertically in a fixed div?-CodePudding

I'm trying to make a simple Webshop and I need help with centering the input elements in the top div.

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 >
    <img src="ImageUsed.png">
    <h1>Webshop Title</h1>
    <form>
      <input type="submit" value="register">
      <input type="submit" value="login">
    </form>
  </div>
</body>

</html>

The div, aswell as the img and h1 elements look good, but I want the two input elements inside the form element to be centered vertically inside the div element. Any Idea how I can do that?

CodePudding user response：

Remove all floats as they are not needed when using flex. Set flex to both top and your <form> then use align-items: center;.

I also added another div to nest your img and h1 in and flexed that so space-between on top pairs them next to each other.

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 >
  <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>

CodePudding user response：

Do not use floats. Use flexbox instead which is what you want to arrange elements in one 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 >
      <img src="ImageUsed.png">
      <h1>Webshop Title</h1>
      <form>
        <input type="submit" value="register">
        <input type="submit" value="login">
      </form>
    </div>
  </body>
</html>

CodePudding user response：

By using flexbox, it becomes more easy

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

CodePudding user response：

If you apply a fixed height and position: relative to your fixed-position header (which I would recommend anyway), you can use the following method for the parent element of those input elements, which uses position: absolute;, top: 50% and translateY(-50%) to center that element vertically in its parent, and right: 0 instead of float: right to align it right:

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 >
      <img src="ImageUsed.png">
      <h1>Webshop Title</h1>
      <form>
        <input type="submit" value="register">
        <input type="submit" value="login">
      </form>
    </div>
  </body>
</html>