Solved

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

Posted on 2013-05-15
7
569 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
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.

 

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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Suggested Solutions

Title # Comments Views Activity
Why is this panel heading creating extra space 2 57
css img-response wont work properly 7 30
Sort Order Icons on HTML Table 3 33
Responsive Font Size 6 26
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 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