CODEWITHSUNDEEP
htmlcss
Derek 朕會功夫
Derek 朕會功夫

Reputation: 94409

How to push up text in CSS?

Demo: http://jsfiddle.net/DerekL/gNkKx/

I am trying to push up the text in a div by 50%, and I tried 

padding-bottom: 50px; /*div is 100px high*/

But it does not work.

padding-top: -50px;

This does not work too. Any work-around?

Upvotes: 6

Views: 54053

Answers (4)

Jojobinx
Jojobinx

Reputation: 11

A slightly cleaner solution: (building off of Sachleen's)

HTML:

<div class="move-me-up">
    <p>Some text</p>
</div>

CSS:

.move-me-up {
    position: relative; 
    top: -50px;
}

This will move the text up 50 pixels on the screen, while only requiring one div!

Upvotes: 1

Wynn
Wynn

Reputation: 207

Try raising the text up with inline-block. Use a border to see where you are. By doing this you can see where margin-top can be adjusted up and how large it is.

<div style='display:inline-block;margin-top:-30px; border: 1px solid pink;'>
    <font style='color:green;'>today </font>
</div>

Upvotes: -1

sachleen
sachleen

Reputation: 31141

line-height:0px; pushes it up some, but I don't know how much and it's apparently not 50px as you want.

You can wrap the element in another container and position it like so:

HTML

<div class="container">
  <div class="block">龍</div>
</div>

CSS (only showing modifications from your style)

.container{
    position: relative;
}
.block {
  position: absolute;
  top: -50px;
}

DEMO

Upvotes: 11

Joshua
Joshua

Reputation: 3603

IF you are trying to center the text within the boxes, try the following:

div.block {
    border: 1px solid black;
    width: 100px;
    height: 100px;
    text-align: center;
   font-size: 80px;
    line-height: 80px;
    overflow: hidden;
    padding-top: 10px;
}
*{
    box-sizing: border-box;
}​

Upvotes: 1

Related Questions