[英]Center content of inline-block div elements
我嘗試在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的答案后
如果檢測到兩個小問題。
我能夠通過將標簽變成塊元素來解決第一個問題。 現在,我正在尋找一種方法來確保所有標簽的底部邊框都具有相同的空間。 (它應該看起來像圖像,而不是小提琴)
在內部div上添加line-height,例如line-height: 50px;
和text-align: center
於外部div
http://jsfiddle.net/2mxud8uk/3/
.outerDiv {
text-align: center;
...
}
.innerDiv {
line-height: 50px;
width: 50%;
...
}
結果
我找到了解決問題的方法: 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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.