9

Problem

So I'm creating a simple navigation menu which contains a div of a tags. Currently it looks like this:

enter image description here

The follow are my HTML and CSS:

HTML

<div id="tabcontent-container">
    <div class="tabcontent-menu">
        <a href="#">WLAN Jumpstart</a>
        <a href="#">Mobility</a>
        <a href="#">Guest Access Jumpstart</a>
    </div>
</div>

The CSS

#tabcontent-container { padding: 15px 0px; position: relative; text-align: center; border-radius: 25px; -webkit-border-radius: 25px; }
.tabcontent-menu {}
.tabcontent-menu a { text-decoration: none; color: white; font-size: 30px; border-right: 1px solid white; line-height: 33px; padding: 0 22px; display: inline-block; width: 200px; height: 70px; vertical-align: top; }
.tabcontent-menu a:last-child { border:none; }
.tabcontent-menu a:hover { color:#000; }

Working example on Jsfiddle.net

The Question

I'm wondering if there is an easier way to align the middle "Mobility" a tag to the middle. The other two links look fine because they are double line. I purposely made them double line for a reason, and now just need the middle one to middle align some how.

Any suggestions?

Community
  • 1
  • 1
Romes
  • 3,088
  • 5
  • 37
  • 52

2 Answers2

5

You can use vertical-align: middle to adjust the position vertically. Since that only works on table cells, set display: table-cell for the .tabcontent-menu a

http://jsfiddle.net/H9VHs/8/

Horen
  • 11,184
  • 11
  • 71
  • 113
  • Note that @Chris version will break when shrinking the window while the `table-cell` version will adjust nicely. – Horen Jul 31 '12 at 21:12
  • Leave the comment on the answer, then; it makes no sense on YOUR answer :). But, when it comes down to that, the `table-cell` method does not evenly distribute extra space among the items, whereas it does so in the `line-height` version (try it -- shrink and expand the viewport for both versions). As indicated in the articles I link to, there are several ways to skin this cat, each with pros and cons. That said, +1, this is one of the valid ways. – Chris Baker Jul 31 '12 at 21:13
  • @Chris: true so, just pointing out the pros of my solution :) BTW: it's easy to set `width: 33%` and it will evenly distribute the extra space http://jsfiddle.net/H9VHs/28/ – Horen Jul 31 '12 at 21:18
  • The `width: 33%` put you over the top. I was trying to center align the text again using the display:table-cell , and couldn't figure it out. Thanks. – Romes Jul 31 '12 at 21:25
  • (don't learn the wrong lesson from this and start using tables for layout :p) – Chris Baker Jul 31 '12 at 21:30
  • Oh geez, we shan't get into this age-old debate here, but I will just leave these here: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html, http://www.hotdesign.com/seybold/, and http://www.chromaticsites.com/blog/13-reasons-why-css-is-superior-to-tables-in-website-design/ – Chris Baker Jul 31 '12 at 21:42
2

I usually accomplish something like this by varying the line-height.

.tabcontent-menu a.midline {
 line-height: 64px;   
}

See it here: http://jsfiddle.net/PZVnq/

Documentation/Further Reading

Chris Baker
  • 49,926
  • 12
  • 96
  • 115
  • I like your idea, however I don't want to use a class for this, as sometimes it might be more than 3 menu items in the content. – Romes Jul 31 '12 at 21:17
  • @Romes The advantage of a class is that you can add the class to any item that has single-row text. Any item without the class will have normal line height. Check out the articles there -- there's several ways to accomplish this, you aren't alone in fighting this layout challenge! – Chris Baker Jul 31 '12 at 21:19
  • I see what you mean. I'm using this in a Wordpress loop, so sometimes there are 5 menu items. Would you just check with javascript the height of the text and if it was single line, just add the class to it? Thanks for the articles I'll check them out. – Romes Jul 31 '12 at 21:22
  • @Romes Ah, dynamic menu items... that's a different matter. In that case, you really should check out Horen's method, that's mentioned in those articles as a possible route, and it would probably work better with dynamic items. As long as IE7 isn't one of your target user agents (and I wouldn't blame you if it isn't), that way works well too. If you DO have to support older IE, then yes, you would have to work with some mechanism of measuring line length to decide whether the class is needed or not, either server- or client-side. – Chris Baker Jul 31 '12 at 21:27
  • agreed. Client hasn't mentions IE7, so we will go with Horen's method for now :) – Romes Jul 31 '12 at 21:33
  • Um, this doesn't work on inline elements at all, right? What am I missing? – Protector one Jan 04 '17 at 11:28
  • 1
    @Protectorone The element in the OP's code has a CSS class that is adding block type display onto the element in question. You are correct that this does not work on inline elements -- inline-block is good though. – Chris Baker Jan 04 '17 at 14:17
  • @Chris: Oh, I see now. Thanks. The title of the question had me confused. – Protector one Jan 04 '17 at 14:37