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

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

我认为这会照顾它。

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

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

我不确定这意味着什么，但垂直位置可以通过top值进行调整。

Answer 2

在: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/

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

祝你好运。

如何在父div的中心对齐绝对位置子元素

2 个答案: