Question

我只是想知道如何将所有三个按钮放在同一行并且所有按钮都在<center>它似乎无法正常工作。

我没有引用CSS因为我很懒，所以我把它放到<style>

<!DOCTYPE html>
<html>
<title>TestWebsite</title>
<center>
  <img src="http://i.imgur.com/ysmxxeq.png">

  <body bgcolor="black">
    <center>
      <style type="text/css">
        .B1 {
          -moz-box-shadow: inset 0px 4px 19px 2px #c1ed9c;
          -webkit-box-shadow: inset 0px 4px 19px 2px #c1ed9c;
          box-shadow: inset 0px 4px 19px 2px #c1ed9c;
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b));
          background: -moz-linear-gradient(center top, #9dce2c 5%, #8cb82b 100%);
          filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
          background-color: #9dce2c;
          -webkit-border-top-left-radius: 0px;
          -moz-border-radius-topleft: 0px;
          border-top-left-radius: 0px;
          -webkit-border-top-right-radius: 0px;
          -moz-border-radius-topright: 0px;
          border-top-right-radius: 0px;
          -webkit-border-bottom-right-radius: 0px;
          -moz-border-radius-bottomright: 0px;
          border-bottom-right-radius: 0px;
          -webkit-border-bottom-left-radius: 0px;
          -moz-border-radius-bottomleft: 0px;
          border-bottom-left-radius: 0px;
          text-indent: 0px;
          border: 12px solid #83c41a;
          display: inline-block;
          color: #ffffff;
          font-family: Verdana;
          font-size: 25px;
          font-weight: bold;
          font-style: normal;
          height: 52px;
          line-height: 52px;
          width: 131px;
          text-decoration: none;
          text-align: center;
          text-shadow: -3px 2px 0px #689324;
        }
        .B1:hover {
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c));
          background: -moz-linear-gradient(center top, #8cb82b 5%, #9dce2c 100%);
          filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c');
          background-color: #8cb82b;
        }
        .B1:active {
          position: relative;
          top: 1px;
        }
      </style>
      <a class="B1" href="http://cocoacraftnetwork.buycraft.net" <strong>Donate! </a>
      <style type="text/css">
        .B1 {
          -moz-box-shadow: inset 0px 4px 19px 2px #c1ed9c;
          -webkit-box-shadow: inset 0px 4px 19px 2px #c1ed9c;
          box-shadow: inset 0px 4px 19px 2px #c1ed9c;
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b));
          background: -moz-linear-gradient(center top, #9dce2c 5%, #8cb82b 100%);
          filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
          background-color: #9dce2c;
          -webkit-border-top-left-radius: 0px;
          -moz-border-radius-topleft: 0px;
          border-top-left-radius: 0px;
          -webkit-border-top-right-radius: 0px;
          -moz-border-radius-topright: 0px;
          border-top-right-radius: 0px;
          -webkit-border-bottom-right-radius: 0px;
          -moz-border-radius-bottomright: 0px;
          border-bottom-right-radius: 0px;
          -webkit-border-bottom-left-radius: 0px;
          -moz-border-radius-bottomleft: 0px;
          border-bottom-left-radius: 0px;
          text-indent: 0px;
          border: 12px solid #83c41a;
          display: inline-block;
          color: #ffffff;
          font-family: Verdana;
          font-size: 25px;
          font-weight: bold;
          font-style: normal;
          height: 52px;
          line-height: 52px;
          width: 131px;
          text-decoration: none;
          text-align: center;
          text-shadow: -3px 2px 0px #689324;
        }
        .B1:hover {
          background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c));
          background: -moz-linear-gradient(center top, #8cb82b 5%, #9dce2c 100%);
          filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c');
          background-color: #8cb82b;
        }
        .B1:active {
          position: relative;
          top: 1px;
        }
      </style>
      <a class="B1" href="http://google.com" <strong>Home </a>
      .B1 { -moz-box-shadow:inset 0px 4px 19px 2px #c1ed9c; -webkit-box-shadow:inset 0px 4px 19px 2px #c1ed9c; box-shadow:inset 0px 4px 19px 2px #c1ed9c; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b)
      ); background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b'); background-color:#9dce2c; -webkit-border-top-left-radius:0px; -moz-border-radius-topleft:0px;
      border-top-left-radius:0px; -webkit-border-top-right-radius:0px; -moz-border-radius-topright:0px; border-top-right-radius:0px; -webkit-border-bottom-right-radius:0px; -moz-border-radius-bottomright:0px; border-bottom-right-radius:0px; -webkit-border-bottom-left-radius:0px;
      -moz-border-radius-bottomleft:0px; border-bottom-left-radius:0px; text-indent:0px; border:12px solid #83c41a; display:inline-block; color:#ffffff; font-family:Verdana; font-size:25px; font-weight:bold; font-style:normal; height:52px; line-height:52px;
      width:131px; text-decoration:none; text-align:center; text-shadow:-3px 2px 0px #689324; } .B1:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c) ); background:-moz-linear-gradient(
      center top, #8cb82b 5%, #9dce2c 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c'); background-color:#8cb82b; }.B1:active { position:relative; top:1px; }
      </style>
      <a class="B1" href="http://google.com" <strong>Forums </a>
    </center>
    </style>
</center>
</head>

</html>

Answer 1

只需将所有标记包装在容器div中，然后将text-align: center;应用于CSS文件中div的样式。

<div>
    <a class="B1" href="http://cocoacraftnetwork.buycraft.net" <strong>Donate! </a>
    <a class="B1" href="http://google.com"> <strong>Home</strong> </a>
    <a class="B1" href="http://google.com"> <strong>Forums</strong> </a>
</div>

例如，请参阅http://jsfiddle.net/socm55po/。

画一个空白

1 个答案: