Align text baseline with a button in CSS

Question

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.

Parchment

you can always achieve it by ussing padding-top, but you probably know this – Lankton

Answer 1

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>

Ludwick

Just to be clear, this only solves the first case (align the block elements). @Roko's answer solves the second. – Myology

The key for me was learning that you have to use "vertical-align" on the /button/, not on the block of text, in combination with line-height on the text. – Colorless

Answer 2

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

Plugugly

Seems almost perfect: is it possible to set line-height to not a fixed value but instead the height of the div, whatever it has been set to by the layout engine? – Parchment

I had always tried to set the line-height of an input separately, but that isn't necessary I see (: thanks for the tip – Desireah

@Paul... from your question is not perfectly clear: are your elements inside a Paragraph? a DIV? is the dashed line the TOP of your main DIV or the Bottom line. – Plugugly

@roXon, sorry, the dashed line was only here to materialize the alignment I would like to achieve. My text and my button are both inside of a div, at the bottom. The text is in the bottom left hand corner, the button is in the bottom right hand corner. Right now, the text is to "high" with respect to the button. The solution you proposed was perfect but it sets the height to 40px so it won't be very robust to fon resizing by the user I guess. – Parchment

Answer 3

Modern solution using align-items: baseline with flexbox.

.container {
    background-color: #333;
    height: 150px;

    font-size: 64px;

    display: flex;
    align-items: baseline;
    gap: 15px;
}

span {
    background: #666;
}

button {
    background-color: #cfe2f3;
    border: 2px solid black;
    font-size: 64px;
}

<div class="container">
   <span>text</span>
   <button>button</button>
</div>

You can also use align-self: baseline; for individual items.

Seymore