Solved

<h1> position absolute inside a <div>, want to center horizontally and vertically

Posted on 2013-05-15
7
556 Views
Last Modified: 2013-05-16
Here is my test page:
http://partnersdesign.net/test

The slides are marked up like this:

<div id="slide1" class="slide">
	<h2>PREPARE FOR RELAUNCH OF SITE IN 14:12:36:05</h2>
	<img src="img/gr_slide1.jpg" border="0" />
</div>

Open in new window


The <div> is positioned relative and initially not displayed:
div.slide{display:none;position:relative;}

The images are 100% of the browser's window width:
div.slide img{width:100%;}

What I want to do seems really simple... center the <h2> element both horizontally and vertically within the <div>.

I assume I need <h2> to be positioned absolute, in order to be displayed over the image.

I could make the <div> have a background image, but then I can't easily stretch the image to fill the entire browser width exactly?

I do not know the width or height of the <div>, because it varies depending on the browser window size.

I do not know the width or height of the <h2>, because it varies depending on its content (the text).

Would appreciate any advice. Is there some way to accomplish this?

Thank you!
0
Comment
Question by:bbdesign
  • 3
  • 3
7 Comments
 
LVL 8

Expert Comment

by:Adrian Crabtree
ID: 39169662
You can give a specific width to the H2 and then center the text. Then give it a height with the same line-height.

h2 {
  width: 600px;
  left: 50%;
  top: 50%;
  margin-left: -300px;
  margin-top: -20px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  position: absolute;
}

Open in new window

You can view it here: http://jsfiddle.net/jHWWr/1/
0
 

Author Comment

by:bbdesign
ID: 39169686
But I don't know the width of <h2>... it will vary from slide to slide depending on how wide the text ends up being. The text is not the same in every <h2>, so I can't really define its width.
0
 
LVL 8

Expert Comment

by:Adrian Crabtree
ID: 39169694
Great point. Forgot to make it percentages.

h2 {
  width: 100%;
  left: 50%;
  top: 50%;
  margin-left: -50%;
  margin-top: -20px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  position: absolute;
}

Open in new window


http://jsfiddle.net/jHWWr/2/
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:bbdesign
ID: 39169752
OK, updated page:
http://partnersdesign.net/test

Granted, I can figure out the height (since the text will never break to two lines) and therefore get it vertically centered relatively easily.

However, I don't want the yellow background to extend to 100% of the browser width. I want it to only be as wide as necessary to encompass the text within it, if you know what I mean?

If this doesn't work, perhaps I will need to hard-code the width of each individual <h2> element, and approximate where it will fall, hoping browser inconsistencies won't cause a problem.

Thanks.
0
 
LVL 8

Assisted Solution

by:Adrian Crabtree
Adrian Crabtree earned 250 total points
ID: 39169774
The only way I can think of is to have a span within the H2. Is that possible for you to do?

Here is live example: http://jsfiddle.net/N7zL6/
0
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39169805
You could wrap the h2 in a div
Give this div an absolute position and left:50%
Give the H2 a position:relative and  left:-50%
0
 

Author Comment

by:bbdesign
ID: 39171222
Yes yes yes! Thanks!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

920 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now