CODEWITHSUNDEEP
htmlcssjquery-ui
LCJ
LCJ

Reputation: 22652

Icon is not aligning with text inside a button

I have a button element with a span inside it for displaying an icon inside the button. But they are not aligned. I referred many forum posts and they suggest middle align – but that does not resolve the issue. Any other way to fix the issue?

Fiddle

http://jsfiddle.net/Vw9Z6/432/

HTM Code

<button class="ui-button ui-widget ui-state-default app-custom-button-request"><span class="ui-button-icon-primary ui-icon ui-icon-star app-span"></span>Request</button>

CSS

.app-custom-button-request 
{
   color:red;
   margin-left:10px; 
   display: inline-block;
   vertical-align: middle; 
   width:200px;
}

Screenshot

enter image description here

Upvotes: 1

Views: 1950

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

This fixes it:

.ui-icon {display: inline-block;}

The .ui-icon is set to block display.

Preview

Imgur

Fiddle: http://jsfiddle.net/5c5zc72d/

Upvotes: 8

Related Questions