html - 我想居中按钮，但就是做不到

Question

我有一个按钮，但我无法在页面上居中。这是CSS。

.banners {padding:12px 0 0 0}
.banners li {float:left;font-size:26px;line-height:2.4em;letter-spacing:-1px;margin-left:6px}
.banners li:first-child {margin-left:0}
.banners li a {width:242px;display:block;height:65px;background:url(http://www.mydomain.com/images/banner-bg.gif) no-repeat left top;text-align:center;color:#fff;text-decoration:none}

这是html

<ul class="banners wrapper">
    <li><a href="#">UNLIMITED<b> $49</b></a></li>
</ul>

Answer 1

This will center only the link

The html:

<div class="buttons">
  <a href="#">UNLIMITED<b> $49</b></a>
</div>

The css:

.buttons {
  text-align:center
}

This will center the link with a background image

The html:

<div class="buttons">
  <a href="#">UNLIMITED<b> $49</b></a>
</div>

The css:

.buttons {
  text-align:center
}
.buttons a {
  display: block;
  margin: 0 auto;
  width: 242px;
  height: 65px;
  background-image:url("bg.jpg");
  line-height:60px; /* <-- If you want the text centered, play with this value */
}

Answer 2

请注意，浏览器使用 ul,li 处理边距和填充的方式是不同的。首先，我们需要通过应用于margin-left:0li 来消除它，并padding:0px 0px 0px 0px;在浏览器中创建一致的行为。并将 display:block 应用于您的 a 标签。

只是一些简单的样式，你应该得到你想要的

.banners
{
   padding:0px 0px 0px 0px;
   list-style-type:none;
}

.banners li{
   margin-left:0px;
}

.banners li a{
    display:block;
    height:65px;
    background:url(http://www.mydomain.com/images/banner-bg.gif)

    margin-left:auto;
    margin-right:auto;
}

margin-left:auto;并将margin-right:auto;块元素居中。你应该使用.banners li a.