我想向左中心这个按钮...阅读代码示例它不居中。如何使用css将其居中,以便当用户在Web浏览器中打开页面时按钮中心自动离开用户分辨率。
以下是代码示例:
HTML:
<div class="wrapper">
<a class="button">Click Me</a>
CSS:
.wrapper {
display: block;
margin: 0 auto;
text-align: center;
}
.button {
color: white;
letter-spacing: -2px;
padding: 20px;
display: block;
text-shadow: 1px 1px 0 #145982;
font-family: 'Myriad Pro',Arial,Helvetica,sans-serif;
font-size: 80px;
font-weight: bold;
text-align: center;
width: 350px;
border: 1px solid #60b4e5;
margin: 60px auto;
background-color: #59aada;
background-image: -moz-linear-gradient(#5eb2e2, #4f9cca);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5eb2e2), to(#4f9cca));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: absolute;
top: 50%;
}
答案 0 :(得分:1)
它没有以text-align: center
为中心的原因,是因为您.button
为display: block
。具有显示块的子元素不遵循父项的文本对齐中心。但是内嵌块,静态或内联的显示确实存在。
.button {
display: inline-block;
}
答案 1 :(得分:1)
您正在使用position:absolute;这就是问题的原因,删除它,你的按钮将居中。