?
Solved

h2 vertical align

Posted on 2012-09-09
23
Medium Priority
?
521 Views
Last Modified: 2012-09-10
how can I make an h2 align vertically within a fixed height div.

The div is 80px and some of the h2's are single line and some are 2 lines in length so I want them to all be centered vertically inside the parent div so they look nice and consistent.
0
Comment
Question by:tf2012
  • 11
  • 7
  • 3
  • +1
23 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 668 total points
ID: 38381361
0
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 668 total points
ID: 38381367
In the CSS give the parent div these properties:

display:table-cell; vertical-align:middle;

Cd&
0
 
LVL 25

Assisted Solution

by:Kyle Hamilton
Kyle Hamilton earned 664 total points
ID: 38381392
none of the above suggestions will work when the text is on more than one line.

Here is one that works in IE 9, chrome and firefox.

http://candpgeneration.com/EE/vertical-align.html

View source for code.

Other than that, you can use a table or javascript.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 38381405
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38381413
like I said, IE9, chrome and FF
0
 
LVL 58

Expert Comment

by:Gary
ID: 38381423
Like I said And yours doesnt work in IE (including IE9)
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38381426
maybe in quirks mode. but then nothing works in quirks mode.

IE9:

IE9
0
 
LVL 1

Author Closing Comment

by:tf2012
ID: 38381429
Thanks!  This seems to work in IE 8 &9, chrome, firefox, and safari.  Good enough for me

.generalProgamsArticlePromoTitleWrapper {
      width:100%;
      height:80px;
      margin:5px 0 3px 0;
      display:table;
}
.generalProgamsArticlePromo h2 {
      margin:0 0 0 0;
      padding:0 0 0 0;
      display:table-cell;
      vertical-align:middle;
}
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38381433
Just a heads up,

The solution does not work in IE8.  You cannot use IE9's developer tools to test for earlier versions of IE. They are not accurate.
0
 
LVL 58

Expert Comment

by:Gary
ID: 38381445
ie9
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38381455
I don't know what kind of IE9 you're using, but here are Browserlab's results.

my suggestion in IE8 and 9
IE8 browserlabIE9 browserlab
accepted solution in IE8:

IE8 - accepted solution
0
 
LVL 58

Expert Comment

by:Gary
ID: 38381463
@ kozaiwaniec
What version of IE9 are you using?
0
 
LVL 1

Author Comment

by:tf2012
ID: 38381467
it works in ie8, in browserlab and on an XP machine running ie8... case closed :)

thanks again
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38381513
Hi GaryC123 and tf2012,

i'm not in the business of getting into war over browser inconsistencies. Just posting the results of my findings. If I came across as bitchy, my apologies..

@tf2012, I'm glad you got a solution you're happy with.

Best,
K
0
 
LVL 58

Expert Comment

by:Gary
ID: 38381526
No I'm curious, I have the final release of IE9 and it doesn't work, even on browsershots.org it didn't work
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38381533
weird.

Windows7
IE 9.0.8112.16421
updated to: 9.09

I checked it in Browserlab and it seems to work in IE8 and 9. I would normally check it in Browserstats but I can't remember my password - haha - it's at work.

At one point there was a comment at the very top of the document, which I removed and that got IE8 to work - go figure.

The sooner IE is obliterated from the face of the planet the better :) - but that's just me (haha - and like a million other developers!)
0
 
LVL 58

Expert Comment

by:Gary
ID: 38381534
Ok it is the comment breaking it in IE9
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38381535
go figure. it worked in my IE9 even with the comment.

cheers.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38381541
the bottom line... it would be really nice to have a working vertical alignment implementation in the next round of browsers and css.. this isn't the first time it's come up. I haven't read the CSS4 spec yet - but i'm holding my fingers crossed. That and variables - wouldn't variables be really fr..kin' nice?

:)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38383743
CSS variables are obtuse.  They have been proposed an rejected several times.

As it happens I published an editorial about CSS Variables last week.


Cd&
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38383866
@Cd&, I looked at your article. No matter what you do, you will have crap developers developing crap code. I don't think we should punish or impede good development for that reason. And anyone who would name their variable a specific color is an idiot and is defeating the whole point. That's not a variable, that's a constant.

Maybe if CSS was a little more sophisticated we wouldn't need as much clutter as is strewn about the internet today. But I don't even think so. People will always push the envelope no matter what the technology - and that goes for amatuers and professionals alike - so like it or not, code garbage will prevail.

I don't think we should cater to the lowest common denominator. Progress is a good thing.

As it stands, I write my css in php with functions (mostly for calculations when I want to preserve certain ratios) and variables, and compile it prior to production.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38383982
Progress is a good thing.

CSS variables would not be progress.  It would be retrograde and put us back to blurring the line between content and presentation.  Good developers don't need CSS-variables because they know how to apply classes and use natural cascades.  All they would do is provide a new way to screw up presentation.

In a way it would be a good thing for sites like EE because we would gain additional traffic for the questions like "Why is my site screwed up;  I only changed one line of CSS."  We already have enough time wasted by the incompetent trying to fix themes, templates an "gee whiz" jquery effects without adding something of no real value that has been rejected everytime it has been proposed.

Cd&
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38384010
back to blurring the line between content and presentation
what do variables have to do with that?

to each his own. everything has its place. working with variables doesn't make you a shitty developer and it doesn't take away any knowledge of cascades and classes.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question