Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
Vertically Aligning text in a DD
Topic Started: Jul 28 2014, 10:32 AM (669 Views)
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
I'm tweaking a theme of mine but I can't vertically align text in a DD element. I'm looking for it to be in the middle, not the top. Can anyone lend a hand?
Code:
 
#sidebar dl dd {
-webkit-margin-start:0;
-moz-margin-start:0;
margin-start:0;
border:1px black solid;
height:30px;
cursor:pointer;
vertical-align:middle;
}
Thanks to anyone that can help :)
Offline Profile Quote Post Goto Top
 
Meta Ing-ZNR
Member Avatar
---
[ *  *  *  * ]
The vertical-align property is meant to vertically-align inline content within a line. (e.g., a small image like an emoticon). With a few exceptions (namely, table cells, headers, and rows), it does nothing to vertically align content within a container, however.

One way to vertically center content within a container, when you know both the height of the container (which you do - 30px), and how many lines will be in the container (probably one), is to add a line-height equal to the height divided by the number of lines*. So, in your case, adding line-height:30px; should do the trick.

* Note that other adjustments may be needed when you have uneven top and bottom paddings
Edited by Meta Ing-ZNR, Jul 28 2014, 01:03 PM.
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
Ah, that's new to me (not line-height: using it to vertically align). I'll give it a shot :)
Edited by Ferby, Jul 28 2014, 06:39 PM.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards - Theme & Code Support · Next Topic »
Add Reply