中心H2稍高於它的父母的div？

我想定位一個樣式化的標題居中，並稍微坐在它的父div上方。我認爲標題必須絕對定位，以便能夠通過向頂部添加負邊距而將其移到父項之外。我可以居中它的位置是相對的，但我不能添加負邊距以將其帶到父代之外。中心H2稍高於它的父母的div？

HTML

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <div class="content"> 
       <h2 class="content-box-title">A Heading</h2> 
       <div class="content-body"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, culpa illum! Sint maiores numquam provident, consequatur voluptatibus, repudiandae, dolorum sed, itaque saepe magni fugit mollitia! Repellat dignissimos, quas esse itaque.</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS

.content { 
    position: relative; 
    background-color: #d5d5d5; 
} 

.content-box-title { 
    position: absolute; 
    background-color: grey; 
    text-align: center; 
    padding: 10px; 
    margin: -40px auto; 
} 

.content-body { 
    padding: 20px; 
}

現在

http://jsfiddle.net/LsohxL3m/

來源

2015-02-08 Myoji

通過使標題的inline-block的，你可以在父DIV使用text-align: center居中。您不需要絕對定位或自動餘量，因此您可以使用負頂部邊距。您可以使用文本對齊留在內容保持這一靠左對齊：

.content { 
    background-color: #d5d5d5; 
    text-align: center; 
} 

.content-box-title { 
    display: inline-block; 
    background-color: grey; 
    text-align: center; 
    padding: 10px; 
    margin-top: -40px; 
} 

.content-body { 
    padding: 20px; 
    text-align: left; 
}

Here's a fiddle。

來源

2015-02-08 14:53:44

檢查：http://jsfiddle.net/LsohxL3m/1/

我改變造型標題如下：

.content-box-title { 
    background-color: grey; 
    text-align: center; 
    padding: 10px; 
    margin-top: -40px; 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2015-02-08 14:51:22 Data2000

這對標題的全寬版本非常有用。我正在尋找它是一箇中心框。我很感激！ – Myoji 2015-02-08 15:05:18

我調整，即小提琴包括這個CSS內容：

.content h2 { 
box-sizing: border-box; 
margin: -60px auto 0; 
width: 100%; 
}

的它似乎居中h2並設置它只是content格上方一點。

但經過深入調查後，它看起來像只需要將width添加到您的原始標記中，並使用框尺寸規則來輔助元素上的填充/邊距。

我這個附加到現有.content-box-title CSS和它工作得很好：

width: 100%; 
box-sizing: border-box;

來源

2015-02-08 14:53:06 Phlume

您可以使用翻譯：

.content-box-title { 
    position: absolute; 
    background-color: grey; 
    text-align: center; 
    padding: 10px; 
    margin-top: -40px; 
    left:50%; 
    transform: translate(-50%, 0); 
}

http://jsfiddle.net/LsohxL3m/6/

來源

2015-02-08 15:00:44

變化

.content-box-title { 
    position: absolute; 
    background-color: grey; 
    text-align: center; 
    padding: 10px; 
    margin: -40px auto; 
} 

.content-body { 
    padding: 20px; 
}

到

.content-box-title { 
    transform: translateY(-60px); 
    background-color: grey; 
    margin-top: 60px; 
    text-align: center; 
    padding: 10px; 
} 
.content-body { 
    padding: 0 20px 20px 20px; 
}

這裏是一個sample

來源

2015-02-08 15:06:31

中心H2稍高於它的父母的div？

回答

相關問題