4 replies [Last post]
RealAndy
Offline
newbie
Australia
Last seen: 4 years 32 weeks ago
Australia
Timezone: GMT+9.5
Joined: 2015-04-27
Posts: 3
Points: 4

Hi there,
I'm trying to vertically centre the items in the drop-down of the mega menu on my website. I've tried vertical-align: middle; but that doesn't seem to work.

The site is www.sciencedemos.org/_dev/ and I'm using SJ Megamenu in Joomla.

Especially annoying is the "Reaction Rate, Equilibrium and Thermochemistry" topic in the "Chemistry" menu.

If someone could take a look and make a suggestion, that would be great.

Thanks,
Andrew

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 13 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

See

See http://gtwebdev.com/workshop/vcenter/vcenter-inline-css.php

Ignore the parts dealing with IE. MSFT has since got its head out and built a decent browser.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

RealAndy
Offline
newbie
Australia
Last seen: 4 years 32 weeks ago
Australia
Timezone: GMT+9.5
Joined: 2015-04-27
Posts: 3
Points: 4

Have tried everything on that

Have tried everything on that page, but nothing works. vertical-align: middle doesn't seem to do anything.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 13 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9745
Points: 3824

Show me

The methods work, so assumption must be that you haven't applied them properly. Show us your code.

g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

RealAndy
Offline
newbie
Australia
Last seen: 4 years 32 weeks ago
Australia
Timezone: GMT+9.5
Joined: 2015-04-27
Posts: 3
Points: 4

Sorry, the reason I hadn't

Sorry, the reason I hadn't put any code is because I've been using 'Inspect Element' in Google Chrome to make the changes, with no success.

The code for the dropdown part is:

.sj-megamenu a>span {    
	display: block;
	font-size: 14px; 
	text-transform: uppercase;
	font-weight: bold;
	color: #444444;
    vertical-align: middle;

I've also tried 'block' and 'table-cell' for the display. There are a lot of areas in the css file that relate to the properties, so the best way to do it is probably to use 'inspect element' in google chrome, that way you can add properties and see what they do.

No matter what I try I have been unable to vertically centre the text.

Oh, the HTML for one item is:

<a  data-image="off" data-title="on" data-description="off" href="/_dev/otherscience/scientific-method"><span class="menu-title"><span>Scientific Method</span></span></a></li>
	<li   class="item-163 level-2 mega-pinned col4">

//mod edit: Don't forget to use bbcode tags (or the code button) for your source. Fixed. ~g