Home / Questions / 251226
Accepted
Efrain Mejias C
Asked: 2020-04-04 04:00:09 +0800 CST 2020-04-04 04:00:09 +0800 CST

How to align the height of objects with CSS?

  • 772

I need to align the height of a button and a text box... How can I do it?

.round {
        background-color: transparent;
        width: auto;
        height: auto;
        margin: 0 auto 15px auto;
        padding: 5px;
        border: 1px solid silver;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        display: inline-block;
    }
<div class="pull-right">
    <form method="GET">
        <div style="display: inline-block ;">
            <input type="search" id="contractNumber" name="contractNumber" placeholder="Contract Number" class="round" />
            <input type="image" src="~/images/Lupa.jpg" width="30" height="30" />
        </div>
    </form>
</div>

Now it looks like this, the text box and the image of the magnifying glass should be at the same height...

enter image description here

html

2 Answers

  1. Best Answer

    Remove the attributes width="30" height="30"of the secondinput

    .round {
  background-color: transparent;
  width: auto;
  height: auto;
  margin: 0 auto 15px auto;
  padding: 5px;
  border: 1px solid silver;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  display: inline-block;
}
    
    <div class="pull-right">
    <form method="GET">
        <div style="display: inline-block ;">
            <input type="search" id="contractNumber" name="contractNumber" placeholder="Contract Number" class="round" />
            <input type="image" src="~/images/Lupa.jpg"/>
        </div>
    </form>
</div>

    • 4

  2. One thing you can do is give it an vertical-align: middleimage inputtype so that it aligns vertically with the middle of the line. That way it will align to the vertical center, it won't matter if the image is 30x30 or 20x20 or if it's bigger and you're scaling it (which seems to be your case).

    Here you can see it working (with a 300x300 image scaled to 30x30):

    .round {
  background-color: transparent;
  width: auto;
  height: auto;
  margin: 0 auto 15px auto;
  padding: 5px;
  border: 1px solid silver;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  display: inline-block;
}

input[type=image] {
  vertical-align: middle;
}
    <div class="pull-right">
  <form method="GET">
    <div style="display: inline-block ;">
      <input type="search" id="contractNumber" name="contractNumber" placeholder="Contract Number" class="round" />
      <input type="image" src="https://placehold.it/300x300" width="30" height="30" />
    </div>
  </form>
</div>

    • 2