你可以完全用CSS进行4点绝对定位 . 您将需要两个元素:
第一个项目从屏幕右侧跨越到内容所在的中心 . 此元素对元素的顶部,左侧和右侧坐标使用绝对定位(我们可以保留底部未指定,因为它由高度处理 . )
第二项嵌套在前者中 . 此项具有固定宽度,以确保内容本身保持您选择的指定宽度 . 我们还可以在此对象上设置高度和填充,父级将继承它的高度 . 不要使用边距来模拟填充 - 当你只是尝试做我们在这里的定位技巧时,它可能会导致跨浏览器问题 .
所以你的HTML代码看起来像这样:
This is just some example text.
而你的CSS看起来像这样:
div#my_centered_design {
background: #000;
margin-left: -400px;
margin-top: -250px;
left: 50%;
position: absolute;
right: 0;
top: 50%;
}
div#my_centered_design_content {
background: #333;
height: 400px;
/* I think you actually want padding for
the effect you're trying to accomplish */
padding: 50px;
width: 700px;
}
基本上这是与Joe2Tutorial相同的技巧,除了我们应用额外的定位规则将中心元素粘附到屏幕的右侧 .