CODEWITHSUNDEEP
htmlcss
SamuraiJack
SamuraiJack

Reputation: 5539

How can I properly align contents of a div in a single line?

.up, .down{
    font-size:6px;
    display:block;
    height:10px;
}
span{
    display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="rotator">
      <span><input type="text" class='Rbox' value="0" /></span>
      <span>
        <input class='up' value="&#9650;" type="button" />
        <input  class='down' value="&#9660;" type="button" />
      </span>
</div>

As you can see, although i was able to bring content div rotator in a single line I am still not able to give it a smooth alignment.

Upvotes: 1

Views: 59

Answers (3)

stanze
stanze

Reputation: 2480

Add this vertical-align: middle; CSS property to the parent of the up and down class.

Upvotes: 0

Junaid
Junaid

Reputation: 1004

you can use

.span{
    display: inline-block;
    vertical-align: middle;
}

Read more at vertical align

Upvotes: 0

ketan
ketan

Reputation: 19341

Give vertical-align: top; to span will solved your issue.

Check 

.up,.down{
    font-size:6px;
    display:block;
height:10px;
}
span{
      display: inline-block;
      vertical-align:top;
}
<div class="rotator">
      <span><input type="text" class='Rbox' value="0" /></span>
      <span><input class='up' value="&#9650;" type="button" />
        <input  class='down' value="&#9660;" type="button" /></span>
    </div>

Upvotes: 5

Related Questions