사업부가 상단에 정렬되지 않았습니다.

왜 이런 일이 발생하고 있습니까? 왜 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 추가 라인에 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

는 또한

.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 의사 요소를 사용하는 2 div 요소 만 있으면이 작업을 수행 할 수 있습니다. 이 두 가지입니다 솔루션에 대한 약간 다른 접근 방식은 인격적으로

.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

A는 모양을 제공하기 위해 전체 사업부 아래로 라인을 통해 텍스트의 상대 위치에 테두리 바닥을 갖추고 있습니다 텍스트 내용으로 구분 된 줄. 아마 더 좋을 수도 있습니다 - 동일한 효과를 얻기 위해 많은 코드를 사용하지 않는 대체 방법을 보여주기 위해이 코드를 사용하지 마십시오.

.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

사업부가 상단에 정렬되지 않았습니다.

답변

관련 문제