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

这将仅以链接为中心

html：

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

css：

.buttons {
  text-align:center
}

这会将链接置于背景图像中心

html：

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

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:0应用于li和padding:0px 0px 0px 0px;来中和它，以便在浏览器之间创建一致的行为。并将display：block应用于您的标签。

只是一些简单的风格，你应该得到你想要的东西

.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的填充来控制你的空间。

我想把一个<ul>按钮居中，但是不能这样做</up>

2 个答案: