对齐圆圈文字

由于某些原因，我的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

对齐圆圈文字

回答

相关问题