Image changes alignment of all components within a div

Question

Image changes alignment of all components within a div

Navigation

#1 by (5 votes)
#2 by (2 votes)

1

I'm creating a FORM within a DIV . In it I have a textbox for the user to enter the data and an image, on 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 does not align 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>

<formname="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 looks like this:

html css

asked by anonymous 08.03.2015 / 17:07

2 answers

2

As @natan commented, add the line vertical-align: middle; to id searchButton and its CSS, leaving CSS like this:

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

Thepropertydeterminestheverticalalignmentofthetext,andhasthefollowingvalues:

baseline=Placestheelementinthebaselineoftheparentelement.Iftheelementdoesnothaveabaseline,italignsthebottomedgeoftheelementwiththebaselineoftheparent.

middle=Placestheelementatthemidpointoftheline,thatis,atthebaselineoftheparentplushalftheheightoftheline.

sub=Placestheelementbelowthebaselineoftheparent.Thisvaluedoesnotinterferewithelementsize.

super=Putstheelementabovethebaselineoftheparent.Thisvaluedoesnotinterferewithelementsize.

text-top=Placestheelementatthetopoftheparent'scontents.

text-bottom=Placestheelementinthebaseofthecontentsoftheparent.

percentage(%)=Placestheaboveelement(positivevalues)orbelow(negativevalues)withthedistanceused.Using0%isthesameasusingbaseline.

length=Putstheaboveelement(positivevalues)orbelow(negativevalues)withtheexactdistanceused.Using0isthesameasusingbaseline.

Thenexttwovaluesaligntheelementanditssub-elements.

top = Places the top of the aligned subelements at the top of the line.

bottom = Places the base of the subelements aligned at the bottom of the line.

09.03.2015 / 12:19

Problem with Build in release mode C # Does PHP work within JavaScript?

score 5 · Accepted Answer

You can use the VERTICAL-ALIGN property.

The vertical-align property is used to align level elements inline elements that are positioned side by side within a block-level element.

Sara Soueidan article on the subject: Vertical-align and W3C's recommendation Vertical-align property

As their inputs are positioned next to each other (and are inline-level) and share the same parent FORM (block level) ownership is the simplest solution.

Just use its value MIDDLE (which positions the element in the middle (half) 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>