CODEWITHSUNDEEP
htmlcss
EnexoOnoma
EnexoOnoma

Reputation: 8836

How to center text in a background div baloon image?

I am having a difficulty on how to center a text in a div with background image. This is my fiddle

http://jsfiddle.net/VnqeY/12/

Thank you.

Upvotes: 1

Views: 779

Answers (3)

Jason Barry
Jason Barry

Reputation: 758

http://jsfiddle.net/VnqeY/16/

Read up on CSS relative positioning.

Upvotes: 0

Gabe
Gabe

Reputation: 50493

jsFiddle

Just declare line-height and set the <a> to be vertical-align: middle

.balloon{
    background:url('http://i.imgur.com/B19Zb.jpg');
    background-repeat: no-repeat;
    text-align: center;
    color:#fff;
    font-size:1.1em;
    height:140px;
    width:140px;
    line-height: 118px;  
}
.balloon a{
    vertical-align: middle;
    color:yellow;
    text-align:center
}

<div class="balloon">
    <a href="#">Advertise with us</a>
</div>

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78530

display: table-cell;
text-align: center;
vertical-align: middle;

one option is to you display:table-cell The image and size and such needs fixed though.

Upvotes: 0

Related Questions