Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

[CSS] Text Alignment

1512594627
Axel
Pro
Sheet Author
Hello! I'd like some help with adjusting the repcontrols in my fieldsets. Specifically I want to adjust the vertical alignment of the text in the add and edit controls. No matter what I try, I can't get it to work. <vertical-align> does nothing, <padding> also doesn't seem to do anything. I can't get the text to align properly in the box of the fieldset buttons. .charsheet .repcontrol_add, .charsheet .repcontrol_edit, .charsheet .repcontrol_del, .charsheet .repcontrol_move{ background: #fae6c8; color: #204060; box-shadow: none; font-size: 0.9em; height: 1.8em; vertical-align: middle; } This is the resulting edit button: As you can see, the text isn't vertically aligned in the middle. Can anyone tell me how to accomplish this?
1512595104
Jakob
Sheet Author
API Scripter
Look at the line-height - the text may be fixed at line-height: 18px or something similar. 
1512658138
Axel
Pro
Sheet Author
Well, I played around with the <line-height> and <height> properties and managed to get it mostly right. It's only off by 1 or 2 pixels now, and I'm fine with that. :) Thanks.
1512674707
Lithl
Pro
Sheet Author
API Scripter
Note: vertical-align does not do what you think it does. It is not like the deprecated  valign  attribute of table cells. The vertical-align property defines how elements in a line sit next to each other, not where an element's children line up vertically. (I think setting vertical-align on a td element will behave like the valign attribute, but that's irrelevant when we're talking about buttons.) I don't know why setting the padding wouldn't work for you. I can only imagine you've got some other CSS that's overriding your attempt to set padding. I just tested setting padding with the selector .charsheet .repcontrol_edit  and it worked fine.