在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>
我的问题是,当我看到该按钮时,其内部的文本(阅读更多)并未从顶部-左侧-右侧-底部的中心完美对齐。我该怎么做! ?
最佳答案
首先,您使用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