如何在其父 div 的中心对齐绝对位置子元素 [重复]

Question

我正在尝试制作一种包含许多 DVD 封面的菜单。当光标位于每个封面上时，它将在一行中显示完整的标题名称（不包裹在封面容器内）。如何将每个封面的标题右对齐。

注意：我想把标题放在封面上方一点，而不是完全超过它。

这是 HTML 示例：

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

这是 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

Answer 1

@Paulie_D 的回答中的“捎带”，我会将元素的属性包含在“正常”状态而不是 :hover 状态中。这样做的两个好处：

• 元素的属性不需要应用于每个:hover 操作，因此优化了元素的重绘。
• 以防万一您想在“正常”状态下显示该内容，该元素已经应用了所有样式。

这就是我的意思：

.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;
}

说实话：

使用:hover显示内容是一种内容策略和用户体验不好的做法：http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/

不仅如此，在触摸屏设备上看不到内容，这使得这种方法完全无法使用。

祝你好运。

Answer 2

当光标位于每个封面上时，它将显示 单行完整的标题名称（不包含在封面内 容器）。如何在每个标题的中心对齐标题 封面。

我认为这会解决它。

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%);
}

我想把标题放在封面上方一点，而不是完全 在它上面。

我不确定这是什么意思，但可以通过 top 值调整垂直位置。