Win a copy of Mesos in Action this week in the Cloud/Virtualizaton forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

jQuery - setting the vertical align property of text in an accordion header

 
Joe Lemmer
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi there,

I want to use jQuery's accordion widget. In my implementation, I want the text in the header sections of the accordion to be vertically aligned in the middle. However, the css property vertical-align seems to have no effect.

I have been using firebug to check that I am adding the vertical-align property to the right class and I am. I have also tried creating a class which will be added only to spans in the headers that contain the text. But that doesn't work either.

I notice that the + and - icons for my headers are vertically aligned in the middle and want to know how they managed this. I see from the css in the jquery-ui-1.7.2.custom.css file that the plus and minus have the following css:


but I understand that the background-position property is just for positioning images.

Please could someone give me some suggestions as to how I can vertically align text in the accordion headers.

Many thanks

Joe

PS. Here is my HTML code and js code:


 
Eric Pascarello
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What you tried to override the class

.ui-accordion .ui-accordion-header a

Eric
 
Joe Lemmer
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi there,

I've fixed the issue now.

In my css, I had set the display property for the ui-accordion-header class to block, like so:



This was because I was using the tag as a header for the accordion as shown in the html above and it didn't seem to display properly without it. It almost looked like tabs. After reading this article, I changed the display property to table-cell and the vertical-align now works. Hurrah!

My css code for the accordion header now looks like:



Cheers

Joe
 
Joe Lemmer
Ranch Hand
Posts: 171
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Eric,

thanks for your reply
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic