Question

here’s my code:

<div class="search-option">
    <div id="slider-days" class="search-opt-left"></div>
    <input type="text" id="amount-days" class="search-opt-right input-small"/>
</div>

I want to make the slider and input field algin to the middle of the line.

How can i do that ? Thanks !

My CSS:

.search-opt-left {
  float: left;
  width: 250px;
  vertical-align: middle;
}
.search-opt-right {
  float: left;
  margin-left: 20px;
}

Answer 1

This can be buggy.
What I usually do is make a table. And since table rows start with vertically-centered alignments, it’s quite simple.

<div class="search-option">
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <div id="slider-days" class="search-opt-left"></div>
            </td>
            <td>
                <input type="text" id="amount-days" class="search-opt-right input-small"/>
            </td>
        </tr>
    </table>
</div>

You may then alter your CSS to get rid of the un-needed stuff.