Solved

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

Posted on 2013-05-15
7
575 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
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!

 

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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

Suggested Solutions

Title # Comments Views Activity
Increase the size of the modal in Bootstrap 5 52
Change of column alignment in div 2 27
Responsive Font Size 6 46
html / css issue / div issue. stuck, help needed 2 23
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

756 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