CSS：邊距自動和位置絕對

我試圖創建一個「按鈕」與2個部分（每個是div的高度的50％）由水平條分隔。每個部分都有居中文本。該按鈕的大小將被操縱使用JavaScript，我試圖避免也使用JavaScript來定位「按鈕」內的元素。CSS：邊距自動和位置絕對

我到目前爲止是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; 
}

任何想法？謝謝。

來源

2015-02-11 jvilhena

所有的代碼都可以。只要把這個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

來源

2015-02-11 18:44:04

.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; 
}

來源

2015-02-11 16:21:26 tleb

這是「解決方案」的一個我的演示我在問題中提到（剝離位置絕對），但我試圖避免因爲它改變了「打開」文本的位置，所以它不再居中。無論如何感謝:) – jvilhena 2015-02-11 16:29:57

我個人沒有看到*開放*的運動... ...鉻40，你呢？ – tleb 2015-02-11 16:31:59

使用firefox 35.它下降了3個像素（我認爲，這可能是分隔符的高度）。將分隔符的高度更改爲10px，將頂部更改爲-5px，並且您可能會更清楚地看到它。 – jvilhena 2015-02-11 16:38:07

此以下修補程序在Firefox和Chrome，但爛攤子IE工作好。我div在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; 
}

固定height，top這裏是在jsfiddle演示。

來源

2015-02-11 16:45:09

CSS：邊距自動和位置絕對

回答

相關問題