Question

我正在尝试创建一个“按钮”，其中有2个部分（每个部分是div高度的50％），由水平条分隔。每个部分都有居中的文本。按钮的大小将使用javascript进行操作，我试图避免使用javascript将元素定位在“按钮”中。

到目前为止我所拥有的是http://jsfiddle.net/u5u7d31p/2/，但我的问题是水平条中心问题。如果我将分隔符的位置更改为相对，则条形图居中，但随后它会更改文本底部的位置。我也可以将边距更改为静态值（margin: 0 63px;）以使其居中，但如果有一个不需要javascript的简单解决方案，我想避免使用它。

.img_overlay .separator{
    position: absolute;
    top: -1px;
    left: 0;
    height: 3px;
    width: 70px;
    margin: 0 auto;
    background: #444;
}

有什么想法吗？感谢。

Answer 1

.img{
    float: left;
    background-repeat:no-repeat;
    background-size:100% 100%;
    border-radius: 4px;
    width: 200px;
    height: 51px;
    background: red;
    overflow: hidden;
}
.img_overlay{
    width: 100%;
    height: 100%;
    background: #222;
    color: #ddd;
    position: relative;
    opacity: 0.8;
}
.img_overlay>div{
    display: block;
    width: 100%;
    height: 50%;
    text-align: center;
    position: relative;
}
.img_overlay .middle{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.img_overlay .separator{
    height: 3px;
    width: 70px;
    margin: 0 auto;
    background: #444;
}

<div class="img">
    <div class="img_overlay">
        <div class="img_show_details">
            <div class="middle">details</div>
        </div>
        <div class="img_open">
            <div class="separator"></div>
            <div class="middle">open</div>
        </div>
    </div>
</div>

我所做的就是起飞：

.img_overlay .separator{
    position: absolute;
    top: -1px;
    left: 0;
}

Answer 2

以下修复在firefox和chrome中运行正常但在IE中混乱。我修复了height中的div，top中的middle和top中的separator

.img_overlay>div {
    display: block;
    width: 100%;
    height: 40%;
    text-align: center;
    position: relative;
}
.img_overlay .middle {
    position: relative;
    top: 60%;
    transform: translateY(-50%);
}
.img_overlay .separator {
    position: relative;
    top: 5px;
    left: 0;
    height: 3px;
    width: 70px;
    margin: 0 auto;
    background: #444;
}

这里是jsfiddle中的演示。

Answer 3

所有代码都可以。只需将此css放在.img_overlay .separator类下面。

完整代码如下：

.img_overlay .separator {
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
right: 0;
}

在jsfiddle

上查看我的演示

CSS：保证金自动和头寸绝对

3 个答案: