Question

我得到的页面是这样的： the image of my page. 。

我想让它集中化，但我不能那样做。问题是：

我想给整个黑色div。
我想集中其他两个div而不使用css中的left属性。
当悬停z的值时，应该增加任意值，以便整个div可以出现。

我了解了保证金：0 auto auto;它相对于页面集中元素的属性。我想使用margin属性w.r.t获得相同的黄色和绿色div。黑色的div。我可以使用CSS获得这些结果，或者我将不得不使用Javascript等？我的HTML代码在这里：

 <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styling.css"/>

    </head>
    <body>
        <div class="first">
            <center> <a href="http://www.google.com">The first link </a></center>
        </div>

        <div class="second">
            <center> <a href="http://www.fb.com"> The second link </a></center>
        </div>

        <div class="third">
            <center> <a href="http://www.yahoo.com"> The third link </a></center>
        </div>      
    </body>
<html>

我的css文件是： -

.first
{
    position: absolute;
    width:500px;
    color:#fff;
    height:200px;
    background-color:#000;
    z-index: 0;

    margin:0 auto 0 auto;
}

.second
{
    width:400px;
    position: absolute;
    height:200px;
    background-color: green;
    left:60px;
    z-index: 1;
    margin:50px auto 0 auto;

 }
 .third
 {
    position: absolute;
    width:300px;
    height: 200px;
    left:100px;
    background-color:yellow;
    z-index: 2;

        margin:100px auto 0 auto;
}

body div:first-child a:hover
{
    font-size:30px;
    color:yellow;
    z-index:5;
}
body  div +div a:hover
{
    font-size:40px;
    color:red;
    z-index: 5;
}
body div+div+div  a:hover
{
    font-size:50px;
    color:#fff;
    z-index:5;
}

我为我的英语道歉。希望你能解决我的问题。

Answer 1

我仍然认为使用left是解决问题的最佳方式 - 不确定为什么OP想要避免它。

以下是概念证明小提琴：http://jsfiddle.net/teddyrised/YqDL5/

相反，请使用以下技巧：将容器的左侧位置设置为容器的50％/父宽度。那是正确的一半。但是，我们还需要考虑元素本身的宽度，这意味着我们必须向后偏移它自己宽度的一半。

使用此：

.second, .third {
    left: 50%;
    transform: translateX(-50%);
}

您还需要对HTML代码进行一些更改：

我建议将所有内容包装在相对定位的父容器周围，而不是使用边距从顶部偏移第二个和第三个div，而是使用top。
删除<center>。将布局委托给CSS，很久以前就弃用了这个HTML标记。

以下是修订后的HTML：

<section>
    <div class="first"><a href="http://www.google.com">The first link </a></div>
    <div class="second"><a href="http://www.fb.com"> The second link </a></div>
    <div class="third"><a href="http://www.yahoo.com"> The third link </a></div>     
</section>

另外，我建议将第一个div设置为相对定位，这样就不会导致父元素的高度崩溃。否则，您必须设置一个显式高度，因为绝对定位会将元素从流中取出，而父级在计算自己的维度时不会将其考虑在内。

section {
    position: relative;
}
.first {
    width:100%;
    color:#fff;
    height:200px;
    background-color:#000;
}
.second, .third {
    left: 50%;
    transform: translateX(-50%);
}
.second
{
    width:400px;
    position: absolute;
    height:200px;
    background-color: green;
    top: 50px;
    z-index: 1;
 }
 .third {
    position: absolute;
    width:300px;
    height: 200px;
    top: 100px;
    background-color:yellow;
    z-index: 2;
}

请参阅：http://jsfiddle.net/teddyrised/YqDL5/

如何集中各种z-index div类？

1 个答案: