CODEWITHSUNDEEP
htmlcssalignment
Krishna Thota
Krishna Thota

Reputation: 7026

Align button text if image is present

I have a button which I'm using multiple times in my webpage. The buttons styles will be as

  1. Button with Text and Image.
  2. Button with only Image.
  3. Button with only Text.

As shown in the fiddle http://jsfiddle.net/xzBaZ/4/

I'm using he same css for the button class. I need to align the Text Vertically to center if it is the first case. and no extra alignment is required for other cases.

How can I do this??

Upvotes: 0

Views: 57

Answers (2)

ap.singh
ap.singh

Reputation: 1160

You should Write the text in span 

  <button onclick="return false" class="super button"><span>Awesome Button &raquo;
           </span> <img src="/Buttons5/add-to-cart-light.png" alt="" width="28" height="20"/>

and also specify the css for span 

.button span{
    float:left;
    margin-top:3px;
}

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191729

vertical-align: bottom on the <img> or make the image and the text equal line heights. The latter requires you to know the image height beforehand.

Upvotes: 1

Related Questions