Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2013-05-15
7
Medium Priority
?
613 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

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 1000 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 1000 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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
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 tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

885 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