How do I align an absolute position child element in the center of its parent div

Question

I'm trying to make a kind of menu where consists of many DVD covers. When the cursor is positioned over each cover it will show the complete title name in a single line (not wrapped inside the cover container). How can I align the title right in the center of each cover.

Note: I would like to place the title a bit above the cover, not completely over it.

Here is the HTML example:

<div id="cover"><span>Here is the title in a single line!</span></div>

Here is the CSS:

#cover{
height:200px;
width: 150px;
background-color:#00f;
margin-top:50px;
margin-left:auto;
margin-right:auto;
}

#cover span{
position:absolute;
background-color:#0f0;
display:none;

}

#cover:hover span{
display:block;
}

JSFIDDLE: example

it would be easiest to make a jsfiddle of the problem. – Jordan.J.D May 23 '14 at 19:33 — Jordan.J.D, May 23 '14 at 19:33

score 3 · Accepted Answer · answered May 23 '14 at 19:52

3

When the cursor is positioned over each cover it will show the complete title name in a single line (not wrapped inside the cover container). How can I align the title right in the center of each cover.

I think this will take care of it.

Codepen.io Demo

CSS

.cover{
  height:200px;
  width: 150px;
  background-color:#00f;
  margin-top:50px;
  margin-left:auto;
  margin-right:auto;
  position: relative;
}

.cover span{
  position:absolute;
  background-color:#0f0;
  display:none;
  color:white;

}

.cover:hover span{
  display:block;
  position: absolute;
  left:50%;  
  top:10%; /* adjust to suit */
  width:auto;
  white-space: nowrap;
  -webkit-transform:translateX(-50%);
  transform:translateX(-50%);
}

I would like to place the title a bit above the cover, not completely over it.

I'm not sure what this means but the vertical positon can be adjusted by means of the top value.

answered May 23 '14 at 19:52

Paulie_D

107,962
13
142
161

WOW it's exactly what I was looking for!!!! Thank you so much Paulie_D – Leandro Tanaka May 23 '14 at 20:00
You are welcome. Please note that it uses CSS3 transforms which are pretty well supported but not universally. ( http://caniuse.com/transforms2d ) When you are ready please mark as the answer. – Paulie_D May 23 '14 at 20:03
The secret was the transform but it seems not to work with IE8, is it there any work around to fix this compatibility issue? – Leandro Tanaka May 23 '14 at 20:14
Not really...because you don't know the width of the text. If you do, you can omit the transform and just use a negative margin-left of 50% of the width. IE8 version - http://codepen.io/Paulie-D/pen/olgeJ – Paulie_D May 23 '14 at 20:18

score 1 · Answer 2 · answered May 23 '14 at 20:42

"Piggybacking" on @Paulie_D's answer, I would include the element's properties in the 'normal' state rather than on the :hover state. Two benefits of this:

The element's properties don't need to be applied on every :hover action, hence optimizing elements' repaint a bit.
Just in case you want to show that content on the 'normal' state, the element will already have all the styles applied to it.

Here's what I mean:

.cover {
  height:200px;
  width: 150px;
  background-color:#00f;
  margin-top:50px;
  margin-left:auto;
  margin-right:auto;
  position: relative;
}

.cover span {
  position:absolute;
  background-color:#f00;
  white-space: nowrap;
  width:auto;
  transform:translateX(-50%);
  position: absolute;
  left:50%;  
  top:10%; /* adjust to suit */
  display: none;
}

.cover:hover span{
  display:block;
}

Truth be told though:

Using :hover to display content is a content strategy and user experience bad practice: http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

Not only that but the content cannot be seen in touch screen devices, which renders this approach completely unusable.

Good luck.

I was in a rush but these are all good points worth mentioning. +1 — Paulie_D, May 24 '14 at 05:25

How do I align an absolute position child element in the center of its parent div

2 Answers2