0

就父元素而言，我如何能够垂直和水平地放置子元素。

#bigBanner  {
position: relative;
width: 960px;
height: 483px;
margin: 0 auto;
background-image:url(../wpimages/sliderbg.jpg);
}

#bannerQuote    {
width: 518px;
height: 127px;
margin: 0 auto;
background-color: #0d0f11;
opacity: 0.95;
filter:Alpha(opacity=95);
}

是代码，bannerQuote 正好在bigBanner 的中间。我将如何实现这一目标？我有一种感觉，这很简单。

谢谢

4

2 回答 2

1

你可以做类似...

#bannerQuote {
  position:absolute;
  top: 50%;
  left: 50%;
  margin-left: -259px;
  margin-top: -64px;
  width: 518px;
  height: 127px;
  background-color: #0d0f11;
  opacity: .95;
  filter:Alpha(opacity=95);
}

其中 margin-left 和 margin-top 由您的高度和宽度决定。由于您将左上角设置为父容器的中心，因此您希望将子元素的一半宽度移回左侧，并将其高度的一半移回顶部。

于 2013-04-22T19:17:29.937 回答
0

只要您在具有特定高度和宽度的父元素中有一个具有特定高度和宽度的子元素，您就可以从顶部和左侧绝对定位子元素。喜欢：

#bannerQuote    {
 position:absolute;
 top: 178px;
 left: 221px;
 width: 518px;
 height: 127px;
 margin: 0 auto;
 background-color: #0d0f11;
 opacity: 0.95;
 filter:Alpha(opacity=95);
}

如果您想在具有动态值的父级中定位具有已知高度和宽度的子级，请参阅 fetchs 答案。

于 2013-04-22T19:55:43.487 回答