0

在 css 中对齐文本很容易！通过使用文本对齐：中心；但我只是做这个

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

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

4

3 回答 3

1

在您的 CSS 中，更改.readmore为#readmore.

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

基本上，使用.classand #Id。

于 2013-11-02T18:57:50.890 回答
1

margin-left: auto;并且 margin-right: auto; 应该将您制作的 div id 框居中对齐:)

哦，而且，你应该使用 # 而不是 . 说到身份证。这些点是用于课程的。

垂直和水平对齐：

您可以使用以下内容垂直对齐 div 只需确保您也使用 % 指定宽度和高度，并从左侧百分比中删除元素的宽度，对高度执行相同的操作。

position: absolute;
top: 50%;
left: 50%;`
于 2013-11-02T18:56:16.660 回答
0

首先，您使用id="readmore"属性，但您的 CSS 是.readmore. 相反，使用其中之一

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

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

.readmore {
    margin: 0 auto;
}

演示

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

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

演示

于 2013-11-02T18:57:26.457 回答