对齐圆形文字

Question

出于某种原因，我的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;

}

任何想法为什么？

Answer 1

尝试添加：

with

Answer 2

我认为它有效

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;