일부 텍스트를 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;
내 문제를 해결했습니다.
