디브 안에서 수직으로 중심을 잡는 방법은?
코드:
<div
id="theMainDiv"
style="
border:solid 1px gray;
cursor:text;
width:400px;
padding:0px;"
>
<span
id="tag1_outer"
style="
background:#e2e6f0;
padding-right:4px;
padding-left:4px;
border:solid 1px #9daccc;
font:normal 11px arial;
color:#3c3c3c"
>as</span>
</div>
지금 렌더링하면 스팬은 디브의 왼쪽 하단 모서리를 정렬합니다.
수직 정렬 이해에 관한 제 기사를 보세요.토론의 마지막에 원하는 것을 달성하기 위한 여러 가지 기술이 있습니다.
(초단축 요약: 어린이의 선 높이를 용기 높이와 동일하게 설정하거나 용기의 위치를 설정하고 어린이를 절대적으로 다음 위치에 배치합니다.top:50%와 함께margin-top:-YYYpx, YYY는 알려진 아이의 키의 절반입니다.)
부모 DIV 추가 시
display:table;
자녀 요소에 추가합니다.
display:table-cell;
vertical-align:middle;
싱글라인 스팬에 대한 빠른 답변
아이(이 경우 스팬)를 같게 합니다.line-height부모로서<div>의 키
<div class="parent">
<span class="child">Yes mom, I did my homework lol</span>
</div>
그런 다음 CSS 규칙을 추가해야 합니다.
.parent { height: 20px; }
.child { line-height: 20px; vertical-align: middle; }
아니면 자식 선택기로 목표물을 공격할 수도
.parent { height: 20px; }
.parent > span { line-height: 20px; vertical-align: middle; }
이것을 내가 사용한 배경
저는 모바일 메뉴에서 항목을 세로로 가운데에 두어야 하는 비슷한 문제를 우연히 발견했습니다.같은 선 높이 안에 디바와 스판을 만들었습니다.이것은 유성 프로젝트를 위한 것이므로 인라인 CSS를 사용하지 않습니다 ;)
HTML
<div class="international">
<span class="intlFlag">
{{flag}}
</span>
<span class="intlCurrent">
{{country}}
</span>
<span class="intlButton">
<i class="fa fa-globe"></i>
</span>
</div>
CSS(div의 여러 범위에 대한 옵션)
.international {
height: 42px;
}
.international > span {
line-height: 42px;
}
이 경우 한 번의 스팬만 있었다면 CSS 규칙을 그 스팬에 직접 추가할 수 있었을 것입니다.
CSS(특정 스팬 하나에 대한 옵션)
.intlFlag { line-height: 42px; }
제게 표시된 방법은 다음과 같습니다.
비슷한 질문과 마찬가지로 사용합니다.display: inline-block자리 표시자 요소를 사용하여 블록 요소 내부의 스팬을 수직 중심에 맞춥니다.
html, body, #container, #placeholder { height: 100%; }
#content, #placeholder { display:inline-block; vertical-align: middle; }<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id="container">
<span id="content">
Content
</span>
<span id="placeholder"></span>
</div>
</body>
</html>수직 정렬은 인라인 요소 또는 테이블 셀에만 적용되므로 함께 사용합니다.display:inline-block아니면display:table-cell와 함께display:table블록 요소를 수직으로 중심을 잡을 때 부모.
참조:
부모 디바에 키를 더하면 50px라고 합니다.자식 스팬에서 선 높이: 50px를 추가합니다. 이제 스팬의 텍스트가 수직으로 가운데가 됩니다.저는 이게 통했어요.
언급URL : https://stackoverflow.com/questions/4357315/how-to-vertically-center-a-span-inside-a-div
'programing' 카테고리의 다른 글
| web.config에서 root (/) 위치를 지정하는 방법? (0) | 2023.10.24 |
|---|---|
| C에서 추상 구문 트리 표현 (0) | 2023.10.24 |
| HTML이 아닌 요청에 대한 응답으로 컨텐츠 보안 정책을 설정한다는 것은 무엇을 의미합니까? (0) | 2023.10.24 |
| scanf 형식 지정자의 별표는 무엇을 의미합니까? (0) | 2023.10.24 |
| sql에서 일 년에 몇 개월 동안 각 달에 대한 합계 얻기 (0) | 2023.10.24 |