왜 vertical-align : text-top; CSS에서 작동하지 않음

일부 텍스트를 div 상단에 정렬하고 싶습니다. vertical-align: text-top;트릭 을 해야하는 것 같지만 작동하지 않습니다. div를 열에 넣고 파선 테두리를 표시하는 등 내가 한 다른 작업 (div 상단이 어디에 있는지 볼 수 있음)은 모두 잘 작동합니다.

#header_p { 
    font-family: Arial;
    font-size: 32px;
    font-weight: bold;
}
#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    vertical-align: text-top;
}
#header_div_left { 
    float: left; 
    width: 50%;
    border: dashed;
    vertical-align: top;
}
#header_div_right { 
    margin-left: 50%;
    width: 50%;
    border: dashed;
}

vertical-align 속성은 인라인 요소 전용입니다. div와 같은 블록 수준 요소에는 영향을주지 않습니다. 또한 text-top은 텍스트를 현재 글꼴 크기의 맨 위로 만 이동합니다. 인라인 요소를 상단에 수직으로 정렬하려면 이것을 사용하십시오.

vertical-align: top;

단락 태그가 오래되지 않았습니다. 또한 span 요소에 적용된 vertical-align 속성이 일부 Mozilla 브라우저에서 의도 한대로 표시되지 않을 수 있습니다.

vertical-align로 렌더링되는 요소에서만 작동하도록되어 inline있습니다. <span>기본적으로 인라인으로 렌더링되지만 모든 요소가 그런 것은 아닙니다. 단락 블록 요소 <p>는 기본적으로 블록으로 렌더링됩니다. 테이블 렌더링 유형 (예 table-cell:)을 사용하면 세로 정렬도 사용할 수 있습니다.

일부 브라우저 vertical-align에서는 단락 블록과 같은 항목에 CSS 속성 을 사용할 수 있지만 허용 되지는 않습니다. 단락으로 표시된 텍스트는 서면 언어 콘텐츠로 채워야합니다. 그렇지 않으면 마크 업이 잘못되어 대신 여러 다른 옵션 중 하나를 사용해야합니다.

이게 도움이 되길 바란다!

뭔가

  position:relative;
  top:-5px;

인라인 요소 자체에서만 작동합니다. 수직으로 중앙에 맞추려면 상단을 가지고 놀아야합니다 ...

position: relative;div에 적용한 다음 position: absolute; top: 0;텍스트가 포함 된 단락 또는 범위에 적용 할 수 있습니다 .

상황 별 선택기를 사용하고 수직 정렬을 거기로 이동할 수 있습니다. 그러면 이것은 p 태그와 함께 작동합니다. 아래의 스 니펫을 예로 들어 보겠습니다. 클래스 내의 모든 p 태그는 세로 정렬 컨트롤을 따릅니다.

#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

#header_selecttxt p {
    vertical-align: text-top;
}

다른 인라인 요소가 이것을 사용할 수 있도록 두 섹션에서 세로 정렬을 유지할 수도 있습니다.

위의 모든 것이 나를 위해 작동하지 않으며 방금 이것과 그 작업을 확인했습니다.

수직 정렬 : 슈퍼;

 <div id="lbk_mng_rdooption" style="float: left;">
     <span class="bold" style="vertical-align: super;">View:</span>
 </div>

패딩 또는 여백으로 작동한다는 것을 알고 있지만 이것이 내가 선호하는 마지막 선택입니다.

position:absolute;
top:0px; 
margin:5px;

내 문제를 해결했습니다.

margin-top : -50 %를 사용하여 텍스트를 div의 맨 위로 이동할 수 있습니다.

margin-top: -50%;

내가 제공 한 정보로 내가 가진 문제를 해결할 수 없습니다.

• 나는 구식 <p>태그로 묶인 텍스트를 가지고 있었다 .

나는 변경 <p>을 <span>하고 그것을 잘 작동합니다.