CODEWITHSUNDEEP
cssimagejquery-uibutton
Andrus
Andrus

Reputation: 27919

how to center ui icon in jquery ui button

I'm looking for a way to create toolbar buttons uisng jquery ui.

I tried to create button using

<div id='menubar_home' style='vertical-align: middle;width: 20px; height: 20px;'>
</div>

and using

$('#menubar_home').button({
    icons: { primary: "ui-icon-home" }
});

But image in button is not centered:

not centered

How to center image in button ?

Upvotes: 7

Views: 7652

Answers (5)

Sergey Kovalenko
Sergey Kovalenko

Reputation: 1

I ended up doing the following in CSS:

#menubar_home {
   font-size: 0; 
   width: 23px; top: 5; 
   height: 23px;
}

Upvotes: 0

Todd
Todd

Reputation: 5454

You could also place a span within the div like so:

<div id="menu-bar-home">
    <span class="ui-icon ui-icon-home"></span>
</div>

reference it in css and change the position:

div#menu-bar-home {
    position:relative;
}
div#menu-bar-home > span {
    position: absolute;
    left: +or-(n)px; /* so just adjust the position
}

also note you may have to adjust the z-index of the span.

best o' luck, bro.

EDIT: you may still achieve the results you want in this manner, but I though you were creating the button with the div.

As the gentleman below suggests, I would set the css for menu bar as such:

div#menu-bar-home
{
display: table-cell;
vertical-align: middle;
text-align:center;
}

Upvotes: 0

Nandhakumar
Nandhakumar

Reputation: 376

#menubar_home {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

Upvotes: 2

Travis J
Travis J

Reputation: 82267

Add a padding:8px; to the button/input style to allow the icon to be properly aligned.

Upvotes: 0

GG.
GG.

Reputation: 21834

I assume there isn't transparent sides in the image.

Adds a border to img to work on positioning: border: 1px solid red;

Then check the image has a display: block; property.

Try to add margin: 0 auto; property, which aims to center a block (your image).

You will perhaps need to add !important to force the property: margin: 0 auto !important;

Hoping to help you (not sure, not easy without manipulating the code myself).

Upvotes: 0

Related Questions