ProgramingTip

왜 vertical-align : text-top;

bestdevel 2020. 10. 29. 08:26
반응형

왜 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;

단락 태그가 오래되지 않았습니다. 또한 스팬 요소에서 수직 정렬 속성이 일부 Mozilla 브라우저에서 표시되지 않습니다.


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

일부 브라우저 vertical-align에서는 단락 블록과 같은 항목에 CSS 속성 을 사용할 수 있습니다. 단락으로 텍스트는 서면 언어 콘텐츠로 채워야합니다. 여러 가지 다른 옵션 중 하나를 사용합니다.

이게 도움이 되길 계속!


뭔가

  position:relative;
  top:-5px;

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


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


상황 별 선택기를 사용하고 수직 정렬을 사용합니다. 그러면 이것은 태그와 함께 작동합니다. 아래의 스 니펫을 예로 들어 보겠습니다. 클래스 내의 모든 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>하고 그것을 잘 작동합니다.

참고 URL : https://stackoverflow.com/questions/924282/why-is-vertical-aligntext-top-not-working-in-css

반응형