html - 如何重叠两个绝对定位的元素？

Question

HTML

<div class="btn" >
            <span>X<span>
            <div class="vertical_line"></div>
</div>

CSS

div.btn{
        width:100px;
        height:100px;
        float:left;
        border:1px solid #000000;
        font-family:Arial, Helvetica, sans-serif;
        font-size:80px;
        text-align:center;
        position: relative;
    }
   div.vertical_line{
        width:0;
        height:100px;
        border:1px solid #000000;
        position:absolute;
        right:50px;
        z-index:100;
        margin:0;
        padding:0;
    }
    div.btn span{
        position:absolute;
        z-index:0;
    }

这是 jsfiddle.

谁能告诉我如何将“X”置于中心，使垂直线和 X 相互重叠？

Answer 1

我没有让跨度文本具有绝对位置，而是让行具有绝对位置，并使用 text-align : center 将文本置于中心。

 div.btn{
        width:100px;
        height:100px;
        float:left;
        border:1px solid #000000;
        font-family:Arial, Helvetica, sans-serif;
        font-size:80px;
        text-align:center;
        position: relative;
    }
   div.vertical_line{
        width:0;
        height:100px;
        border:1px solid #000000;
        position:absolute;
        right:49px;
        z-index:100;
        margin:0;
        padding:0;
        top : 0;
    }
    div.btn span{
        float:left;
        width : 100%;
        text-align : center;
        z-index:0;

    }