對齊圓圈文字

由於某些原因，我的CSS文件不會對齊頁面上的圓圈。對齊圓圈文字

這是我的一個圓HTML對象：

<div class="circle-text">Upload your photo here</div>

CSS文件：

.circle-text { 
display: table-cell; 
height: 400px; /*change this and the width 
for the size of your initial circle*/ 
width: 400px; 
text-align: center; 
vertical-align: middle; 
align 
border-radius: 50%; 
/*make it pretty*/ 
background: #000; 
padding-top:; 
color: #fff; 
font: 18px "josefin sans", arial;

}

任何想法，爲什麼？

來源

2017-10-15 Sarah H.

你能解釋一下你的意思時，你說你的CSS不會調整您圈上頁？將它與什麼對齊？ – FluffyKitten

問題的屏幕截圖會有幫助。請分享一下。 –

這是完美的文字，已經是div的中心，請刪除vertical-align：middle;屬性下方的「align」。這是CSS的額外部分。 –

嘗試添加：

.circle-text{ 
    margin: auto 
}

來源

2017-10-15 04:15:02 williamsi

我認爲它的工作原理

.circle-text { 
 
height: 400px; /*change this and the width 
 
for the size of your initial circle*/ 
 
width: 400px; 
 
line-height: 400px; 
 
text-align: center; 
 
vertical-align: middle; 
 
border-radius: 100%; 
 
position:absolute; 
 
left:50%; 
 
transform:translate(-50%,0); 
 
/*make it pretty*/ 
 
background: #000; 
 
color: #fff; 
 
font: 18px "josefin sans", arial;} 
 
.circle-text .txt{ 
 
    line-height: 400px; 
 
text-align: center; 
 
vertical-align: middle; 
 
}

<div class="circle-text"><div class="txt"> 
 

 
Upload your photo here</div></div>

來源

2017-10-15 04:28:50 Gattbha

對齊圓圈文字

回答

相關問題