Solved

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

Posted on 2013-05-15
7
562 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Angular JS Route 3 68
Change color of modular 8 30
CSS z-index issue 3 31
Could you point how to give Bootstrap's open/ close menu effect ? 25 51
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…

816 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

6 Experts available now in Live!

Get 1:1 Help Now