Question

在CSS中对齐文本很容易！通过使用text-align：center; 但我只是做这个

.readmore {
    width: 80px;
    height: 30px;
    background: #000000;
    text-align: center;
    border-radius: 3px;
    float: center;
    color: #fff;
    font-family: 'Rambla', sans-serif;
    -webkit-transition: background-color 1s;
    -o-transition: background-color 1s;
    -moz-transition: background-color 1s;
    transition: background-color 1s;
}

.readmore:hover {
    background-color: #F79100;
    cursor: pointer;
    color: #000;
    font-family: 'Rambla', sans-serif;
}

并在HTML上

<div id="readmore">Read More</div>

我的问题是，当我看到按钮时，里面的文字（阅读更多）在左上 - 右下 - 底部没有完全对齐。我该怎么做！？

Answer 1

margin-left: auto;和 margin-right: auto; 应该居中对齐你所做的div id框：）

哦，而且，你应该使用＃而不是。说到ID的。点是针对班级的。

垂直和水平对齐：

您可以使用以下方法垂直对齐div 只要确保你用％指定宽度和高度，并从左边的百分比中删除元素的宽度，用高度做同样的事情。

position: absolute;
top: 50%;
left: 50%;`

Answer 2

在您的css中，将.readmore更改为#readmore。

.前缀是指类名，而#前缀是指id。

基本上，请使用.class和#Id。

Answer 3

首先，您使用id="readmore"属性，但您的CSS为.readmore。相反，请使用其中一个

id="readmore"和#readmore
class="readmore"和.readmore

要使框水平居中（相对于其父级），可以使用

.readmore {
    margin: 0 auto;
}

Demo

此外，如果您想垂直居中按钮的文字（相对于方框），请使用

.readmore {
    height: 30px;
    line-height: 30px; /* same as height */
}

Demo

在CSS中对齐文本

3 个答案: