왜 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
'ProgramingTip' 카테고리의 다른 글
2D 배열을 3 차원으로 N 번 복사 (Python) (0) | 2020.10.29 |
---|---|
모든 코드 위치가 독립적이지 않은 이유는 무엇입니까? (0) | 2020.10.29 |
Oracle의 더하기 (+) 표기법과 ANSI JOIN 표기법의 차이점은 무엇입니까? (0) | 2020.10.29 |
htaccess는 기본 인증에서 하나의 URL을 제외합니다. (0) | 2020.10.29 |
항아리 불일치! (0) | 2020.10.29 |