플렉스 박스 - 가운데 텍스트 - 우수한 라이브러리

나는 하나의 하이퍼 링크로 완전히 덮힌 사각형 모양의 플렉스 박스를 가지고 있습니다.플렉스 박스 - 가운데 텍스트

이제 flexbox의 내용을 수직 가운데에 배치하고 싶습니다. 나는 사각형 모양을 잃고 이후

그러나, 재산 display: table 및 재산 display: table-cell; vertical-align: middle와 중첩 div와 div 요소를 사용하면 작동하지 않습니다.

ul 및 li 대신 div을 사용하면 모든 곳을 클릭 할 수있는 속성을 잃게됩니다.

내가 좋아하는 것 "텍스트"빨간색 상자의 수평 및 수직 중심으로 정렬 할 다음과 같이

body { 
 
    margin: 0px; 
 
    width: 100%; 
 
} 
 
main { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-container { 
 
    width: 100%; 
 
} 
 
ul { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    list-style: none; 
 
    -webkit-padding-start: 0px; 
 
    -webkit-margin-before: 0px; 
 
    -webkit-margin-after: 0px; 
 
} 
 
li { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 50%; 
 
} 
 
.red { 
 
    background-color: red; 
 
} 
 
.white { 
 
    background-color: white; 
 
} 
 
.tile:before { 
 
    content: ''; 
 
    float: left; 
 
    padding-top: 100%; 
 
} 
 
.tile { 
 
    text-align: center; 
 
}

<main> 
 
    <div class="flex-container"> 
 
    <ul> 
 
     <li class="red"> 
 
     <a href="/"> 
 
      <div class="tile"> 
 
      Text 
 
      </div> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</main>

이

출처

2017-01-30 Skrodde

는 불필요한 사업부를 제거하고 전체 높이를 커버 링크 자체 플렉스 항목을 만들고, 그 내용이 중심이있다. – CBroe

main { 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
a { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background-color: red; 
 
    height: 100%; 
 
}

<main> 
 
    <a href="/"> 
 
    <div class="tile">Text</div> 
 
    </a> 
 
</main>

출처

2017-01-30 15:50:20

이 .tile의 delcaration에서, 당신은 인 flexbox 코드가 필요 :

justify-content: center; 
display: flex; 
align-items: center;

LI 선언은 flexbox 속성을 사용하지 않으므로 display : block이어야합니다. 다음으로

출처

2017-01-30 15:50:19

는 CSS를 변경 :

는

.tile:before { 
     content: ''; 
     float: left; 
    } 
    .tile { 
     text-align: center; 
     padding-top: 50%; 
     padding-bottom: 50%; 
    }

당신은 당신의 사각형 모양을 잃지 않을 것이며, 패딩은 항상 텍스트를 중심으로합니다.

당신은 여기에서 확인할 수 있습니다 :

https://plnkr.co/edit/BgPW9exwJpyxHFn5fMBP?p=preview

출처

2017-01-30 15:52:16 FioleNana

내가 .tile의 :before 부분을 제거하고, a 태그 (현재 클래스 ED click-container로 이동이 곳처럼 느껴지지 않기 때문에.

이제 정사각형 앵커가 생겼으므로 수직 정렬 트릭을 사용하여 콘텐츠 가운데에 맞출 수 있습니다.이 예제에서는이 예제를 사용했습니다. 절대 + tra nslate 트릭 :

body { 
 
    margin: 0px; 
 
    width: 100%; 
 
} 
 
main { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
} 
 
.flex-container { 
 
    width: 100%; 
 
} 
 
ul { 
 
    display: flex; 
 
    flex-wrap:wrap; 
 
    list-style: none; 
 
    -webkit-padding-start:0px; 
 
    -webkit-margin-before: 0px; 
 
    -webkit-margin-after: 0px; 
 
} 
 
li { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 50%; 
 
} 
 
.red { 
 
    background-color: red; 
 
} 
 
.white { 
 
    background-color: white; 
 
} 
 

 
/* edited code */ 
 
.tile { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.click-container { 
 
    display: block; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.click-container:before{ 
 
    float: left; 
 
    padding-top: 100%; 
 
    content: ""; 
 
}

<body>  
 
    <main> 
 
    <div class="flex-container"> 
 
     <ul> 
 
     <li class="red"> 
 
      <a class="click-container" href="/"> 
 
      <div class="tile"> 
 
       Text 
 
      </div> 
 
      </a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </main> 
 
</body>

출처

2017-01-30 16:02:42 AVAVT

플렉스 박스 - 가운데 텍스트

답변

관련 문제