未對齊頂部

爲什麼發生這種情況？我需要一個能解釋爲什麼div不正確排列的人？未對齊頂部

HTML和CSS：

.horizontal-ruler { 
 
    width: 100%; 
 
    height: 25px; 
 
    line-height: 25px; 
 
    display: block; 
 
    font-size: 14px; 
 
    color: #373737; 
 
} 
 
.horizontal-ruler .ruler-unit { 
 
    width: 30px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    line-height: 25px; 
 
    height: 25px; 
 
    vertical-align: middle; 
 
} 
 
.h-ruler-first-line, 
 
.h-ruler-second-line { 
 
    width: calc(50% - 15px); 
 
    margin: 12px 0; 
 
    height: 1px; 
 
    background-color: #373737; 
 
    display: inline-block; 
 
}

<div class="horizontal-ruler"> 
 
    <div class="h-ruler-first-line"></div><!-- 
 
--><div class="ruler-unit">24"</div><!-- 
 
--><div class="h-ruler-second-line"></div> 
 
</div>

https://jsfiddle.net/6xuvr6vw/1/

正如你可以看到.ruler-unit不包含進.horizontal-ruler。

來源

2016-09-20 Razvan Cuceu

「垂直對齊：中間」缺少在此選擇.H-直尺一線 –

@RazvanCuceu：能否請你確認以下，如果他們幫助你的答案？謝謝！ – kukkuz

添加vertical-align: middle到行：

.h-ruler-first-line, .h-ruler-second-line { 
    width: calc(50% - 15px); 
    margin: 12px 0; 
    height: 1px; 
    background-color: #373737; 
    display: inline-block; 
    vertical-align: middle; 
}

小提琴：https://jsfiddle.net/udwffajo/

來源

2016-09-20 09:49:10 kukkuz

您需要添加vertical-align: middle到線也

.horizontal-ruler { 
 
    width: 100%; 
 
    height: 25px; 
 
    line-height: 25px; 
 
    display: block; 
 
    font-size: 14px; 
 
    color: #373737; 
 
} 
 

 
.horizontal-ruler .ruler-unit { 
 
    width: 30px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    line-height: 25px; 
 
    height: 25px; 
 
    vertical-align: middle; 
 
} 
 

 
.h-ruler-first-line, 
 
.h-ruler-second-line { 
 
    width: calc(50% - 15px); 
 
    vertical-align: middle; 
 
    margin: 12px 0; 
 
    height: 1px; 
 
    background-color: #373737; 
 
    display: inline-block; 
 
}

<div class="horizontal-ruler"> 
 
    <div class="h-ruler-first-line"></div><!-- 
 
--><div class="ruler-unit">24"</div><!-- 
 
--><div class="h-ruler-second-line"></div> 
 
</div>

來源

2016-09-20 09:49:02

只需要使用:after和:before僞元素就可以實現。

.horizontal-ruler{ 
 
    text-align: center; 
 
    overflow: hidden; 
 
    line-height: 25px; 
 
    font-size: 14px; 
 
    color: #373737; 
 
    height: 25px; 
 
} 
 
.horizontal-ruler .ruler-unit { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    position: relative; 
 
    padding: 0 10px; 
 
} 
 
.horizontal-ruler .ruler-unit:before, 
 
.horizontal-ruler .ruler-unit:after { 
 
    background-color: #373737; 
 
    position: absolute; 
 
    margin-top: -1px; 
 
    width: 9999px; 
 
    height: 1px; 
 
    right: 100%; 
 
    content: ''; 
 
    top: 50%; 
 
} 
 
.horizontal-ruler .ruler-unit:after { 
 
    right: auto; 
 
    left: 100%; 
 
}

<div class="horizontal-ruler"> 
 
    <div class="ruler-unit">24"</div> 
 
</div>

來源

2016-09-20 09:53:33

稍微不同的方法來解決方案 - 這展示了整個股利和下跌超過該行的文本的相對位置的邊框底部，爲的外觀它是兩個行由文本內容分隔。可能會更好 - 只是爲了向你展示一個替代品，它不需要太多的代碼就能達到相同的效果。

.horizontal-ruler{ 
 
    border-bottom:solid 1px #373737; 
 
    text-align:center; 
 
} 
 
.ruler-unit{ 
 
    font-size:24px; 
 
    width:30px; 
 
    margin:0 auto; 
 
    padding: 0 10px; 
 
    position:relative; 
 
    top:14px; 
 
    background:white; 
 
}

<div class="horizontal-ruler"> 
 
<div class="ruler-unit">24"</div> 
 
</div>

來源

2016-09-20 09:58:22 gavgrif

回答

相關問題