flexbox를 사용하여 일부 내용을 세로로 정렬 <li>하지만 큰 성공을 거두고 싶지 않습니다.
온라인에서 확인했으며 많은 자습서가 실제로 align-items:center부모의 flex 설정에서 가져 오는 래퍼 div를 사용 하지만이 추가 요소를 잘라낼 수 있는지 궁금합니다.
목록 항목 높이가 동적이므로이 인스턴스에서 flexbox를 사용하기로 선택했습니다 %.
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-self: center;
background: silver;
width: 100%;
height: 20%;
}<ul>
<li>This is the text</li>
</ul>답변
사용하는 대신 align-self: center사용 align-items: center.
를 변경 flex-direction하거나 사용할 필요가 없습니다 text-align.
다음은 한 번의 조정으로 모든 코드를 작동시키는 코드입니다.
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
/* align-self: center; <---- REMOVE */
align-items: center; /* <---- NEW */
background: silver;
width: 100%;
height: 20%;
}이 align-self속성은 flex 항목에 적용됩니다 . 귀하 li의 상위 항목 인 –에 ul–가 display: flex없거나 display: inline-flex적용 되지 않았기 때문에 귀하 는 유동 항목 이 아닙니다 .
따라서, ul플렉스 컨테이너 li는 아니고, 플렉스 아이템은 아니고, align-self효과가 없습니다.
align-items속성과 유사 align-self은 적용을 제외하고, 플렉스 용기 .
(가) 때문에 li가요 성 용기이며, align-items수직 자식 요소의 중심을 사용할 수있다.
기술적으로, 방법 align-items과 align-self작동 방식은 다음 과 같습니다 .
align-items컨테이너 의 속성은 align-self(항목의) 기본값을 설정합니다 . 따라서 align-items: center모든 플렉스 항목이로 설정됩니다 align-self: center.
그러나 align-self개별 항목 을 조정하여이 기본값을 무시할 수 있습니다 .
예를 들어, 동일한 높이 열을 원할 경우 컨테이너가로 설정됩니다 align-items: stretch. 그러나 하나의 항목을 맨 위에 고정해야하므로로 설정됩니다 align-self: flex-start.
텍스트는 어떻게 유연 아이템입니까?
어떤 사람들은 텍스트가 어떻게 실행되는지 궁금해 할 것입니다 …
<li>This is the text</li>의 하위 요소입니다 li.
인라인 수준 요소로 명시 적으로 줄 바꿈되지 않은 텍스트는 인라인 상자로 알고리즘 적으로 줄 바꿈되기 때문입니다. 이것은 익명 인라인 요소 와 부모의 자식으로 만듭니다.
CSS 사양에서 :
블록 컨테이너 요소 내에 직접 포함 된 모든 텍스트는 익명 인라인 요소로 처리되어야합니다.
flexbox 사양은 유사한 동작을 제공합니다.
플렉스 컨테이너의 각 유입 하위 항목은 플렉스 항목이되고, 플렉스 컨테이너 내부에 직접 포함 된 각 연속 텍스트는 익명의 플렉스 항목으로 래핑됩니다.
따라서의 텍스트 li는 플렉스 항목입니다.
답변
가장 투표 된 답변은 내용 (텍스트)이 요소 안에 싸여있는 OP에 의해 게시 된 이 특정 문제 를 해결 하는 것 inline-block입니다. 어떤 경우 에는 컨테이너 내부에 일반 요소를 세로로 가운데에 배치하는 것이 좋을 수도 있습니다. 내 경우에도 적용되므로 필요한 것은 다음과 같습니다.
align-self: center;답변
가장 좋은 방법은 flexbox 안에 flexbox를 넣는 것 입니다. 당신이해야 할 일은 아이에게주는 것 align-items: center입니다. 그러면 부모 내부의 텍스트가 세로로 정렬됩니다.
// Assuming a horizontally centered row of items for the parent but it doesn't have to be
.parent {
align-items: center;
display: flex;
justify-content: center;
}
.child {
display: flex;
align-items: center;
}답변
결과
HTML
<ul class="list">
<li>This is the text</li>
<li>This is another text</li>
<li>This is another another text</li>
</ul>align-items대신에 사용 align-self하고에 추가 flex-direction했습니다 column.
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
.list {
display: flex;
justify-content: center;
flex-direction: column; /* <--- I added this */
align-items: center; /* <--- Change here */
height: 100px;
width: 100%;
background: silver;
}
.list li {
background: gold;
height: 20%;
}답변
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-items: center;
background: silver;
width: 100%;
height: 20%;
}<ul>
<li>This is the text</li>
</ul>답변
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
ul {
height: 100%;
}
li {
display: flex;
justify-content: center;
align-items:center;
background: silver;
width: 100%;
height: 20%;
}<ul>
<li>This is the text</li>
</ul>답변
를 사용 display: flex하면 HTML 요소의 수직 정렬을 제어 할 수 있습니다.
.box {
height: 100px;
display: flex;
align-items: center; /* Vertical */
justify-content: center; /* Horizontal */
border:2px solid black;
}
.box div {
width: 100px;
height: 20px;
border:1px solid;
}<div class="box">
<div>Hello</div>
<p>World</p>
</div>