Question

我有这段代码：

<div class="likearea">
    <a href="#">like to enter</a>
</div>

这是我的样式表：

.likearea{
    width:200px;
    height:200px;
    float:right;
    background-color:#00653b;
    border-radius:200px;
    float:right;
    margin-right:10%;
    margin-top:5%;
}
.likearea a{
    color:#FFF;
    font-size:44px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    line-height:50px;
    margin-top:5%;
}

我需要将文字定位在中心，但它不起作用。我希望“喜欢”自己与“to”和“输入”任何帮助一样吗????

Answer 1

.likearea{
margin: 10px auto;
overflow: hidden;
width: 286px;

}

.likearea a{display: block;}

Answer 2

HTML

<div class="likearea">
    <a href="#">like to enter</a>
</div>

CSS

 .likearea{
    width:200px;
    height:200px;
    float:right;
    background-color:#00653b;
    border-radius:200px;
    text-align: center;
    float:right;
    margin-right:10%;
    margin-top:5%;
}
.likearea a{
    color:#FFF;
    font-size:20px;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    vertical-align: middle;
    line-height: 200px; /* the same as your div height */
}

Answer 3

你可以使用display：flex; align-self：center;用于垂直居中。

对于水平居中，您可以使用margin-left / right：auto

.likearea{
    width: 200px;
    height: 200px;
    float: right;
    background-color: #00653B;
    border-radius: 200px;
    float: right;
    margin-right: 10%;
    margin-top: 5%; 
    box-sizing: border-box;
    text-align: center;
    display: flex;
}
.likearea a {
    color: #FFF;
    font-size: 44px;
    /* text-align: center; */
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 50px;
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    width: 150px;   
    align-self: center;
}

Answer 4

您需要将“.likearea”的显示设置为table，将text-align设置为center 那么对于“.likearea a”，您需要将显示设置为table-cell并将vertical-align设置为middle;

以下代码正在运作

 .likearea{
width:200px;
height:200px;
float:right;
background-color:#00653b;
border-radius:200px;
float:right;
margin-right:10%;
margin-top:5%;
text-align:center;
display: table;

}

.likearea a{
    color:#FFF;
    font-size:44px;
    text-decoration:none;
    text-transform:uppercase;
    font-weight:bold;
    line-height:50px;
    margin-top:5%;
    display:table-cell;
    vertical-align: middle;
}

使用css将文本放在圆圈中

4 个答案: