텍스트를 수평으로 정렬하는 동안 요소를 수직 및 수평으로 가운데에 맞 춥니 다

Question

당사 사이트에는 당사 제품에 대한 일부 색상 견본이 필요하며 보스는 인쇄 카탈로그에서와 똑같이 보이기를 원합니다. 이것은 사각형의 수평 행을 의미합니다. 각기 다른 색을 사용하고 절대 중심에 그 색의 이름이 겹쳐집니다. 그래서 같이 :

나는이 확립 된 규칙을 따라 우리의 웹 사이트의 견본을 만들기위한 두 가지 방법을 시도했지만, 그냥 어떤 이유로 일이 아닙니다. 그리고 예, 저는 아직 조금 초보자입니다.

는 여기 display:table/display:table-cell 방법을 사용하여, 내 첫 번째 시도이다 :

JSFiddle

<p>Standard Ink Colors</p> 
<ul class="color-list"> 
    <li id="thumb-red"> 
    <p>Red</p> 
    </li> 
    <li id="thumb-orange"> 
    <p>Orange</p> 
    </li> 
    <li id="thumb-athleticgold"> 
    <p>Athletic Gold</p> 
    </li> 
</ul> 
<p>Be sure to specify Standard ink color above or provide us with your PMS ink number. </p> 

모든 라인 업 텍스트의 마지막 기준에 따라.

그래서 나는 Flexbox를 사용하여 시도 :

JSFiddle

<p>Standard Ink Colors</p> 
<ul class="color-list"> 
    <li id="thumb-red">Red</li> 
    <li id="thumb-orange">Orange</li> 
    <li id="thumb-athleticgold">Athletic Gold</li> 
</ul> 
<p>Be sure to specify Standard ink color above or provide us with your PMS ink number. </p> 

비슷한 문제 만 지금은 일이 첫베이스 라인에 일렬로.

수정 사항이 있습니까?

Answer 1

개별 항목의 부모를 플렉스 컨테이너로 만듭니다. 이 몇 가지 기본 설정을 활성화합니다 :

• flex-direction: row - 각 자식 요소 ("플렉스 항목")는 단일 행에 강제
• flex-wrap: nowrap -

그런 다음 할 항목은 포장 할 수 없습니다 주 컨테이너의 각 플렉스 아이템은 (중첩 된) 플렉스 컨테이너로서의 기능을 수행합니다. 이렇게하면 하위 요소 (이 경우 텍스트)의 정렬을 제어 할 수 있습니다.

justify-content, align-items 및 text-aligncenter에 대한 모든 설정과 함께, 텍스트는 항상 수직 및 수평으로 중심이 될 것입니다. 원래 코드의 정렬 불량에 대해서는

.color-list { 
 
    display: flex; 
 
    justify-content: center; 
 
    padding: 0; 
 
} 
 
.color-list li { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center;  
 
    text-align: center; 
 
    width: 4em; 
 
    height: 4em; 
 
} 
 
#thumb-red   { background-color: #CE1126; } 
 
#thumb-orange  { background-color: #FE5000; } 
 
#thumb-athleticgold { background-color: #FFB81C; }

<ul class="color-list"> 
 
    <li id="thumb-red">Red</li> 
 
    <li id="thumb-orange">Orange</li> 
 
    <li id="thumb-athleticgold">Athletic Gold</li> 
 
</ul>

... 일반적인 의미에서

은 각 항목에 display: inline-flex를 사용할 필요가 없습니다. 그러나 이것이 당신이 가진 요구 사항이라면, 각각 에 vertical-align: middle 또는 top을 추가하면됩니다.여기에 설명입니다 : Why is there a vertical scroll bar if parent and child have the same height?

브라우저 지원 : 인 flexbox 모든 주요 브라우저, except IE < 10에서 지원

. Safari 8 및 IE10과 같은 일부 최신 브라우저 버전은 vendor prefixes이 필요합니다. 접두사를 추가하는 빠른 방법은 Autoprefixer을 사용하십시오. this answer에서 자세한 내용.

Answer 2

모든 접근 방식을 사용할 수 있습니다. 그냥 vertical-align: top;을 에 적용하십시오. 컬러리스트 리

Answer 3

귀하의 CSS를 약간 변경했습니다. 컨테이너에 디스플레이 및 테이블 추가 : talbe-cell이 추가되었습니다. 그것은 견본 동일한 폭을 모두 유지로

.color-list { 
 
    display: table; 
 
} 
 
.color-list li { 
 
    width: 4em; 
 
    height: 4em; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
} 
 

 
.color-list li > p { 
 
    text-align: center; 
 
} 
 

 
#thumb-red { 
 
    background-color: #CE1126; 
 
} 
 

 
#thumb-orange { 
 
    background-color: #FE5000; 
 
} 
 

 
#thumb-athleticgold { 
 
    background-color: #FFB81C; 
 
}

<p>Standard Ink Colors</p> 
 
<ul class="color-list"> 
 
    <li id="thumb-red"> 
 
    <p>Red</p> 
 
    </li> 
 
    <li id="thumb-orange"> 
 
    <p>Orange</p> 
 
    </li> 
 
    <li id="thumb-athleticgold"> 
 
    <p>Athletic Gold</p> 
 
    </li> 
 
</ul> 
 
<p>Be sure to specify Standard ink color above or provide us with your PMS ink number. </p>

나는, 내가