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

Posted 2023-03-05

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

【英文标题】：How do I align an absolute position child element in the center of its parent div [duplicate]

【发布时间】：2014-07-13 06:43:01

【问题描述】：

我正在尝试制作一种包含许多 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

【问题讨论】：

最容易解决问题。

【参考方案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/

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

祝你好运。

【讨论】：

我很着急，但这些都是值得一提的好点。 +1

【参考方案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 值调整垂直位置。

【讨论】：

哇，这正是我要找的！！！！非常感谢 Paulie_D

不客气。请注意，它使用的 CSS3 转换得到了很好的支持，但并不普遍。 (caniuse.com/transforms2d) 准备好后请标记为答案。

秘密是转换，但它似乎不适用于 IE8，是否有解决此兼容性问题的解决方法？

不是真的...因为您不知道文本的宽度。如果你这样做，你可以省略变换，只使用宽度的 50% 的负边距。 IE8版本-codepen.io/Paulie-D/pen/olgeJ