Aligning Text Vertically in a button and dynamically changing the Icon

[Andy Parker]

Hi,

I written some code to modify buttons on my page, this changes the height of the button but I cant seem to get the text centralised vertically.

Appery('btn_shop').height('46px');
Appery('btn_shop').css('display','table-cell');
Appery('btn_shop').css('vertical-align','middle');
Appery('btn_shop').css('text-align','left');
Appery('btn_shop').show();

Also, can you tell me how I can show an icon on the button as this disappears as soon as I change the button text.

Alternatively, if there is a way to change the button text without messing up the current CSS (i.e. height and icon) then that would be better.

Oh, one last thing, is it possible to make the button slightly transparent as well?

many thanks.

Andy

[Kateryna Grynko]

Hi Andy,

Here is how to rotate text: http://stackoverflow.com/questions/10...

To add image to button run this code:precodevar img = '<img src="link-to-image&#46;png"&#47;>';
Appery("mobilebutton")&#46;append(img);/code/preWhere 'mobilebutton' is a button name,
'link-to-image.png' is an image path.

To make a button transparent use CSS attribute 'opacity'. For example, codeopacity:0&#46;5;/code

[Andy Parker]

Thanks Katya,

I think I may have asked the wrong question (thanks for the transparency and image link though).

I need to align the text to the middle of the button (vertical plane) so the text is still horizontal but centralised height wise.

many thanks.

[Kateryna Grynko]

Andy,

Add this CSS:prewidth: 10px;
word-wrap: break-word;/preHere any can set any width instead of 10 px.

[Andy Parker]

Sorry, let me see if I can say this with pictures

this is what I have (the text is on a button):

this is what I need to achieve:

[Kateryna Grynko]

Hi Andy,

What is your page structure? A Label component should be inside of another component. Set this style for a parent element:preheight: 50px;
display: table;/preAnd this one for a child element:prevertical-align: middle;
display: table-cell;/pre