中心內容

Question

我嘗試做這樣的事情在CSS/HTML：

每個「盒子」應該是錯誤的詳細信息的鏈接。 文本框內的紅色div應該水平居中，如圖所示。

這裏是我的代碼：JSFiddle

.outerDiv { 
    display: inline-block; 
    border-radius: 10px; 
    border: 2px solid #c3c3c3; 
    height: 100px; 
    width: 100px; 
    margin: 5px; 
} 

.innerDiv { 
    width: 50%; 
    height: 100%; 
    margin: 0 auto; 
} 

.errorLabel {  
    background-color: #a90329; 
    display: inline; 
    padding: .2em .6em .3em; 
    font-size: 75%; 
    color: #fff; 
    border-radius: .25em; 
    line-height: 1; 
    vertical-align: baseline; 
    font-weight: 700; 
    text-align: center; 
    white-space: nowrap; 
    box-sizing: border-box; 
} 

編輯： 如果檢測到兩個小問題的Fabrizio Calderan

的答案後。

• 當標籤的文本很短時，它會顯示在文本所在的同一行上。
• 當標籤的文字很長或包含換行符時，標籤看起來不太好。

New JsFiddle

我能夠通過轉動標籤成塊元素來解決第一個問題。 現在我正在尋找一種方法來確保所有標籤都具有與底部邊框相同的空間。 （它應該看起來像的圖像，並且不喜歡小提琴）

Answer 1

我發現我的問題的解決方案：JsFiddle

.outerDiv { 
    text-align: center; 
    float: left; 
    border-radius: 10px; 
    border: 2px solid #c3c3c3; 
    height: 100px; 
    width: 100px; 
    margin: 5px; 
    line-height: 50px; 
} 

.errorLabel { 
    display:inline-block; 
    vertical-align: bottom; 
    margin-bottom:7px; 
    width:84%; 
    background-color: #a90329; 
    padding: .2em .6em .3em; 
    color: #fff; 
    border-radius: .25em; 
    line-height: 1; 
    font-weight: 700; 
    white-space: nowrap; 
    box-sizing: border-box; 
} 

Answer 2

一個行高添加到內DIV，例如line-height: 50px;和text-align: center到外層div

http://jsfiddle.net/2mxud8uk/3/

.outerDiv { 
    text-align: center; 
    ... 
} 

.innerDiv { 
    line-height: 50px; 
    width: 50%; 
    ... 
} 

---

結果