Geek Answers Handbook

Text at the bottom of the div

Is there a way to get the text of the div content at the bottom? Here I gave an example.

http://jsfiddle.net/JGuP7/

This is the sample hierarchy:

<div class="button">Button Label</div>

I am trying to achieve a result without adding extra intervals or changing the hierarchy.

+6
source share
3 answers

Three possible solutions, although each has its own reservations.

jsFiddle demo

The first solution relies on line-height: 220px; vertical-align: bottom; line-height: 220px; vertical-align: bottom; to align the text with the bottom of the DIV . The second solution creates :before psuedo element, which pushes the text to the bottom of the DIV (this does not require additional markup). Both solutions will fail in IE7 or earlier, and both will have problems if:

  • Change font size
  • Text wraps in the second line
  • The size of the change in the containing item

The third solution is based on the display: box; property display: box; , which is a CSS property that is phasing out (more details in Quick hits using a flexible box model ). This solution is only supported by Chrome from v4, Firefox from v2 and IE10. However, the new Flexbox standard is standardized, but browser support is minimal. This solution can be considered "too new" for effective use ( html5please.com/#flexbox ).

Generally speaking, you should consider a new wrapping element around your text that will allow position: absolute; bottom: 0; position: absolute; bottom: 0; Simplify an element to the bottom of the parent element. This makes it possible to increase the child element up as the font size or text length increases and does not depend on the size of the parent container. Depending on how important your position is to your layout, you can add this new element using Javascript. This is probably not ideal, given the question you asked, but browser support is no less ideal for the crazier CSS solutions listed above :-p

+9
source

Another way to do this would be to use "display: table-cell" and "vertical-align: bottom".

http://jsfiddle.net/JGuP7/1/

 .button { display: table-cell; background-color: darkred; color: white; width: 120px; height: 120px; text-align: center; vertical-align: bottom; }
+5
source

If you use position:relative in the container and use

 position:absolute; bottom:0;

You can achieve the desired result.

Your CSS might look like this:

  .button { display: block; background-color: darkred; color: white; width: 120px; height: 120px; text-align: center; position: relative; } .bottomContent { position:absolute; bottom: 0; }

and your HTML:

 <div class="button"><p class="bottomContent">Button Label</p></div>

A source

0
source

More articles:


All Articles