未对齐顶部

为什么发生这种情况？我需要一个能解释为什么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

回答

相关问题