CODEWITHSUNDEEP
htmlcss
ArabianMaiden
ArabianMaiden

Reputation: 527

How do I align my search-input and submit-button to the center of the page?

Sorry, I know this is super basic but I've been through my coding reference books all day and I think my mind's a little buggered. I need to get BOTH the input field AND the "submit" button in one line, in the center of the page, similar to Google.

.logo {
  width: 50%;
  display: block;
  margin: auto;
}

.input-fields {
  padding: 3%;
  width: 40%;
  display: block;
  margin: auto;
  font-size: 90%;
}

.submit {
  padding: 3%;
  width: 15%;
}
<header>
  <img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za">
</header>
<div class="form-wrapper">    
  <form class="center">
    <input class="input-fields" name="search" type="text" placeholder="Search for anything...">
    <input class="input-fields submit" name="find" type="submit" value="Find">
  </form>
</div>

The problem I'm getting is that the button is stacking underneath the text-field. What am I missing out?

Upvotes: 0

Views: 2255

Answers (3)

VXp
VXp

Reputation: 12058

Well Google has it vertically and horizontally aligned so you should try something like this (simplified version):

* {margin: 0; padding: 0; box-sizing: border-box}
html, body {width: 100vw; height: 100vh}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.align-me {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.align-me > .form-wrapper > .center {
  display: flex;
}
<div class="align-me">
  <header>
    <img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za">
  </header>
  <div class="form-wrapper">
    <form class="center">
      <input class="input-fields" name="search" type="text" placeholder="...">
      <input class="input-fields submit" name="find" type="submit" value="Search">
    </form>
  </div>
</div>

But their design is not responsive and this is.

Upvotes: 1

TrickyDupes
TrickyDupes

Reputation: 276

You are missing a 

display: inline-block;

on the elements you want to display in line. You currently have 'display: block;' This will push elements on to there own line.

You may also want:

vertical-align: middle;

To make them vertically aligned relative to each other.

To make sure they both stay dead center in the page put them all in a container (or just use your existing form container) and style it like:

position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
text-align: center;

This will ensure no matter what the screen size is the container is in the middle both vertically and horizontally.

Upvotes: 0

FluffyKitten
FluffyKitten

Reputation: 14312

What you are seeing is the default behaviour of display:block.

Using display:inline-block will make them block elements so you can add padding, etc, but make them inline so they will appear beside each other (assuming they fit, and other styles don't change the default behaviour).

Just change the display from block to inline-block in your CSS here:

.input-fields {
    [...]
    display:inline-block;
}

Working snippet:

.logo {width: 50%; display:block; margin:auto;}

.input-fields {
    padding:3%;
    width:40%;
    display:inline-block; /* change this from block to inline-block */
    vertical-align: middle; /* this will help with any vertical alignment issues */
    margin:auto;
    font-size:90%;


    }

.submit {
    padding:3%;
    width:15%;
    } 
   
 /* Add this this to center your inputs - 
    you included the "center" class in your HTML but not it in your CSS */
.center { text-align:center}
<header><img class="logo" src="OnSaleTodayMobile.png" alt="OnSaleToday.co.za"/></header>
    <div class="form-wrapper">
    <form class="center">
    <input class="input-fields" name="search" type="text" placeholder="Search for anything..."/>
    <input class="input-fields submit" name="find" type="submit" value="Find"/>
    </form>
    </div>

Upvotes: 1

Related Questions