Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to push up text in CSS?

Tags:

html

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?

like image 225
Derek 朕會功夫 Avatar asked Jul 16 '12 03:07

Derek 朕會功夫


People also ask

How do I move text in HTML?

So, type the open <marquee> tag before the text we want to move and close the <marquee> tag just after that text. Step 3: By default, the text moves from right to left direction on the web page. If we want to specify the direction, then we have to specify the direction attribute in the <marquee> tag.

How do I bring a font down in CSS?

If you want to move the text down, use padding-top.

How do I move text inside a div?

Using the Line-Height Property In most cases, you can also center text vertically in a div by setting the line-height property with a value that is equal to the container element's height.


1 Answers

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

like image 165
sachleen Avatar answered Sep 19 '22 01:09

sachleen