How to stack text with pure CSS?

Question

I want to use a text as the background for another text. Basically, this is quite easy by using two div elements with appropriate position and z-index settings, as described in Is there a way to use use text as the background with CSS?.

My problem is that I want to align both texts, although they are different in size. The background text is bigger, and the foreground text shall be aligned vertically with the background one, so that both texts' vertical center is at the same position.

I can achieve this by manually adjusting the position in pixels, but I have to do this for every font-size I want to use individually. Moreover, I can never be sure that this works in every browser in the same way.

Is there a better alternative to do this?

See http://dl.dropbox.com/u/16259019/Sample.png for an example: The background text shall be larger, and the foreground text shall be vertically centered on top of the background text. Ideally I'd love to do this with two `div` elements and appropriate css classes. Any ideas? — Golo Roden, Nov 30 '12 at 11:33

score 4 · Accepted Answer · answered Nov 30 '12 at 11:52

I got it by using:

<div style="position: relative; font-size: 100pt; height: 100px;">
  <div style="font-size: 2em; color: #f00; position: absolute; top: 0; left: -0.37em; bottom: 0; right: 0; z-index: -1; line-height: 0.4em;">
    B
  </div>
  Sample text
</div>

Using left and line-height properties I am able to align both texts, and when I increase the font-size of the container, their relative alignment stays the same.

score 0 · Answer 2 · answered Nov 30 '12 at 11:38

Vertical align can be done like this:

.parent {
position:relative;
zoom:1;/*has layout for ie*/
}
.verticalcentered1, .verticalcentered2 {
position:absolute;
top:50%;
height:20px;
margin-top:-10px;/*half the height*/
}
.verticalcentered1 {z-index:1;}    
.verticalcentered2 {z-index:2;}

If the verticalcentered elements are youre texts they will be vertically centered in the parent and be on top of each other, if thats what youre looking for.

score -1 · Answer 3 · answered Nov 30 '12 at 11:46

-1

i think you are looking like this :- DEMO

HTML

<div id="container">
        <div id="background">Sample Some Text </div>
        B
</div>

CSS

#container {
    position: relative;
    font-size:70px;
    color:#00c7ff;
    z-index:-1; 
}

#background {
    left: 20px;
    position: absolute;
    right: 0;
    top: 25%;
    z-index: 10;
    color:black;
    font-size:20px;
}

answered Nov 30 '12 at 11:46

Shailender Arora

7,674
2
31
35

1

example is broken – ashleedawg Jan 11 '20 at 02:08

score -2 · Answer 4 · answered Nov 30 '12 at 11:27

Yeah ofcourse you can user alternative way - Placeholder text

Text will be automatically removed when you type the new text then default text will be remove

//textbox

<input  type="text" defaultvalue="Name" value="Name" name="add_name" id="add_name">

//Javasript Code

//For the placeholder
    $('#add-category input[type=text]').focus(function() {

        if ($(this).val() == $(this).attr('defaultValue')) {
          $(this).val('');
        }
      });

      $('#add-category input[type=text]').blur(function() {

        if ($(this).val() == '') {
          $(this).val($(this).attr('defaultValue'));
        } 
    });

Try the above option.

I'm very sorry, but my question was not about `input` elements :-/ — Golo Roden, Nov 30 '12 at 11:34

How to stack text with pure CSS?

4 Answers4