Image changes alignment of all components within a div

Question

I’m creating a FORM within a DIV. In it I have a text box for the user to enter the data and an image, to the right, to forward the data.

The problem I’ve been having is that my image changes the positioning of AddressBar inside the container or simply not aligned with the other elements.

.fields label {
  background: #f6a828;
  border-radius: 6px 0 0 6px;
  color: #fff;
  cursor: pointer;
  display: inline;
  float: left;
  padding: 7px 5px;
  font: 15px'Open Sans', Arial;
  width: 60px;
}
#Address {
  margin-left: 1px;
  margin-top: 5px;
}
#searchButton {
  width: 20px;
  height:20px;
  }

<form name="addressBar" method="post" action="teste2.html">
  <fieldset>
    <div class="fields">
      <label for="">Address</label>
      <input type="text" name="addressBar" id="Address">
      <input type="image" name="searchButton" id="searchButton" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ44wMLpgbaOufW65LhrFS0gQ0O0k3CxVzCLzD6U1hLMAqDUif3YA">
    </div>
  </fieldset>
</form>

<form name="addressBar" method="post" action="teste2.html">
         <fieldset> 
            <div class="fields">
                <label for="">Address</label> 
                <input type="text" name="addressBar" id="Address">
                <input type="image" name="searchButton" id="searchButton" 
                       src="img/searchButton.jpg"> 
            </div> 
         </fieldset> 
    </form>

Without the image it looks like this:

Answer 1

You can use the property VERTICAL-ALIGN.

The vertical-align property is used to align level elements inline which are positioned next to each other within a block level element.

Full article of Sara Soueidan on the subject: Vertical-align and recommendation of the W3C Vertical-align property

How your inputs are positioned next to each other (and are inline level) and share the same parent FORM (block level) property is the simplest solution.

Just use your value MIDDLE (Which places the element in the half (middle) of the vertical based on the BASELINE of its parent element) in its INPUT with ID #searchButton.

.fields label {
  background: #f6a828;
  border-radius: 6px 0 0 6px;
  color: #fff;
  cursor: pointer;
  display: inline;
  float: left;
  padding: 7px 5px;
  font: 15px'Open Sans', Arial;
  width: 60px;
}

#Address {
  margin-left: 1px;
  margin-top: 5px;
}

#searchButton {
  width: 20px;
  height:20px;
  vertical-align: middle; /* AQUI */
}

<form name="addressBar" method="post" action="teste2.html">
  <fieldset>
    <div class="fields">
      <label for="">Address</label>
      <input type="text" name="addressBar" id="Address">
      <input type="image" name="searchButton" id="searchButton" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ44wMLpgbaOufW65LhrFS0gQ0O0k3CxVzCLzD6U1hLMAqDUif3YA">
    </div>
  </fieldset>
</form>

Answer 2

As @Natan commented, add the line vertical-align: middle; in id searchButton and your CSS, leaving CSS that way:

.fields label {
  background: #f6a828;
  border-radius: 6px 0 0 6px;
  color: #fff;
  cursor: pointer;
  display: inline;
  float: left;
  padding: 7px 5px;
  font: 15px'Open Sans', Arial;
  width: 60px;
}
#Address {
  margin-left: 1px;
  margin-top: 5px;
}
#searchButton {
  width: 20px;
  height:20px;
  vertical-align: middle;
  }

<form name="addressBar" method="post" action="teste2.html">
  <fieldset>
    <div class="fields">
      <label for="">Address</label>
      <input type="text" name="addressBar" id="Address">
      <input type="image" name="searchButton" id="searchButton" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ44wMLpgbaOufW65LhrFS0gQ0O0k3CxVzCLzD6U1hLMAqDUif3YA">
    </div>
  </fieldset>
</form>

The property determines the vertical alignment of the text, and has the following values:

1. baseline = Puts the element in the baseline of the parent element. If the parent element does not have a baseline, aligns the lower margin of the element with the baseline of the father.
2. Middle = Places the element at the midpoint of the line, i.e., in the baseline parent plus half of line height.
3. sub = Place the element below the baseline of the parent. This value does not affect the size of the.
4. super = Place the element above the baseline of the parent. This value does not affect the size of the.
5. text-top = Puts the widget at the top of the parent content.
6. text-bottom = Places the widget in the parent’s content base.
7. percentage (%) = Place the element above (positive values) or below (negative values) with the distance used. Using 0% is the same as using baseline.
8. length = Place the element above (positive values) or below (negative values) at distance exact used. Using 0 is the same as using baseline.

The next two values align the element and its subelements.

9. top = Puts the top of the aligned subelements at the top of the line.
10. bottom = Places the base of the aligned subelements at the base of the line.