이 CSS 데모를 살펴보고 내부 div를 외부 div 내부에 중앙에 배치하고 내부 div의 텍스트를 중앙에 배치하는 방법을 알려주세요.
.outer{
width: 100px;
height: 100px;
background: #fc2e5a;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
.inner {
width: 80px;
height: 80px;
background: #fff;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
<div class="outer">
<div class="inner">Test</div>
</div>
사용하지 않고 table-cell나 flex-box또는 position당신이 당신 된 div의 정확한 크기를 알고있는 경우 다음과 같이 뭔가를 할 수를 :
.outer{
width: 100px;
height: 100px;
padding: 10px;
border-radius: 50%;
background: #fc2e5a;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.inner {
width: 80px;
height: 80px;
line-height: 80px;
border-radius: 50%;
text-align: center;
background: #fff;
}
다음은 데모입니다.
에 대한 브라우저 특정 접두사를 제거 하고 전체 크기와 독립적으로 border-radius설정하도록 설정했습니다 50%.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다