0

.searchbar {
display: block;
border: 1px solid red
}

.searchbar input[type=text] {
float: left;
width: 80%;
box-sizing: border-box;
border-radius: 30px;
display: inline-block;
outline: none;
border: 3px solid black;
padding: 16px;
margin: 6px;
vertical-align: middle;
}

.searchbar button {
width: 16%;
box-sizing: border-box;
display: inline-block;
padding: 16px;
margin: 6px;
border:none;
vertical-align: middle;
}
<div class = 'searchbar'>
<form>
<input type = 'text' placeholder = 'Click here'>
<button type = 'button'>Search</button>
</form>
</div>

In order to align both elements vertically, I used vertical-align: middle and, according to CSS-TRICKS, it works with inline-level elements. Despite setting their display values to inline-block, it doesn't seem to work . As you may have already noticed, <input> isn't aligned to the center as if it had not effect. In fact, if I were to delete vertical-align: middle, it would look the same. Also, it seems that <input> bottom margin isn't working. However, it should since it's a block-level element.

Nameless
  • 383
  • 2
  • 11

2 Answers2

2

Just add this styling:

.searchbar form {
  display: flex;
  align-items: center;
}

Here is the snippet:

.searchbar {
display: block;
border: 1px solid red
}

.searchbar form {
  display: flex;
  align-items: center;
}

.searchbar input[type=text] {
float: left;
width: 80%;
box-sizing: border-box;
border-radius: 30px;
display: inline-block;
outline: none;
border: 3px solid black;
padding: 16px;
margin: 6px;
vertical-align: middle;
}

.searchbar button {
width: 16%;
box-sizing: border-box;
display: inline-block;
padding: 16px;
margin: 6px;
border:none;
vertical-align: middle;
}
<div class = 'searchbar'>
<form>
<input type = 'text' placeholder = 'Click here'>
<button type = 'button'>Search</button>
</form>
</div>
Blaze_droid
  • 479
  • 4
  • 13
1

Instead of going with the approach you explained above you can use flex.

Just add display flex to your form and let the margin:auto do the rest.

.searchbar {
    display: block;
    border: 1px solid red
}

.searchbar input[type=text] {
    float: left;
    width: 80%;
    box-sizing: border-box;
    border-radius: 30px;
    display: inline-block;
    outline: none;
    border: 3px solid black;
    padding: 16px;
    margin: auto;
    vertical-align: middle;
}

.searchbar button {
    width: 16%;
    box-sizing: border-box;
    display: inline-block;
    padding: 16px;
    margin: 6px;
    border: none;
    vertical-align: middle;
}

.d-flex {
    display: flex;
}
<div class='searchbar'>
    <form class="d-flex">
        <input type='text' placeholder='Click here'>
        <button type='button'>Search</button>
    </form>
</div>

Change the margin to auto instead of 6px and add display flex to form.

thelovekesh
  • 1,364
  • 1
  • 8
  • 22