Align text baseline with a button in CSS

I would like to achieve one of the two alignments represented on this image: . CSS3 is ok or even better if it makes things simpler.

My main problem is that I managed to align one div containing the text with the button, but the text itself is aligned with the top of the div and not the bottom.

Solution 1:

You can use: line-height!

.box {
  color: #fff;
  background: #444;
  height:      40px;  
  line-height: 40px; /* Same as height  */
}

<p class="box">some text <input type="button" value="Button" /></p>

set for the button parent,
where, as you can see, line-height matches the element height
and will align both texts at the element's (p) center. Otherwise, the button, being an inline element by default, it's subject to manipulations using the CSS property vertical-align: which basically aligns all *inline** elements vertically inside a block level element using this typography terms:

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
vertical-align: 10em;  
vertical-align: 4px;
vertical-align: 20%;

*_{https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align}

exactly, you can even manually adjust the alignment using PX / -PX and %

I've encountered some issues using line-height on Android browsers (), so sometimes the right solution was to play with the parent padding * and vertical-align rather than the inner children's alignments (with line-height).

*_{(note: padding for block elements is more consistent than (top, bottom) used on inner inline elements.)}

Solution 2:

I think what you're after is vertical-align: text-bottom;

http://jsfiddle.net/EQgFF/3/

p.box {
    color:#fff;
    background:#444;
    width:400px;
    line-height: 40px;
}

span { background: #666; }

input { vertical-align: text-bottom; border: 1px solid #CCC; height: 24px; }

<p class="box"><span>some text</span> <input type="button" value="Button"/></p>