Question

好的，所以我尝试使用css元素，float：center;。但是，它不会起作用。有没有其他方法可以将我的盒子放在我的网页中心。顺便说一句，我在水平方向谈话。

这是我的样式表代码：

.menubox{
    width: 45%;
    height: 13%;
    background-color: white;
    border: solid 1px white;
    box-shadow: 0px 3px 5px 1px silver;
    opacity: 0.85;
    position: fixed;
    float: center;
}

这是我的HTML代码：

<div class="menubox">

    <table align="center" class="menu">
        <tr>
            <td><a class="menu" href="index.html">Home</a></td>
            <td><a class="menu" href="about.html">About</a></td>
            <td><a class="menu" href="buy.html">Buy</a></td>
            <td><a class="menu" href="contact.html">Contact</a></td>
        </tr>
    </table>

</div>

以下是我网页上的内容：

My box

Answer 1

float:center不存在且margin:auto无法处理固定的排名元素。

由于元素的宽度已知，我们可以计算边距：

.menubox {
  width: 45%;
  margin-left: 27.5%;     /* 55% divided by 2 */
  position: fixed;
}

＆＃13;

body {
  background: #000;
}
.menubox {
  width: 45%;
  margin-left: 27.5%;
  /* 55%/2 */
  height: 13%;
  background-color: white;
  border: solid 1px white;
  box-shadow: 0px 3px 5px 1px silver;
  opacity: 0.85;
  position: fixed;
}

＆＃13;

<div class="menubox">

  <table align="center" class="menu">
    <tr>
      <td><a class="menu" href="index.html">Home</a>
      </td>
      <td><a class="menu" href="about.html">About</a>
      </td>
      <td><a class="menu" href="buy.html">Buy</a>
      </td>
      <td><a class="menu" href="contact.html">Contact</a>
      </td>
    </tr>
  </table>

</div>

＆＃13;

或者，不是进行计算（或宽度未知），您可以使用变换。

.menubox {
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

body {
  background: #000;
}
.menubox {
  width: 45%;
  left: 50%;
  transform: translateX(-50%);
  height: 13%;
  background-color: white;
  border: solid 1px white;
  box-shadow: 0px 3px 5px 1px silver;
  opacity: 0.85;
  position: fixed;
}

＆＃13;

<div class="menubox">

  <table align="center" class="menu">
    <tr>
      <td><a class="menu" href="index.html">Home</a>
      </td>
      <td><a class="menu" href="about.html">About</a>
      </td>
      <td><a class="menu" href="buy.html">Buy</a>
      </td>
      <td><a class="menu" href="contact.html">Contact</a>
      </td>
    </tr>
  </table>

</div>

＆＃13;

Answer 2

固定位置相对于窗口视图

你必须从你的css中删除属性float：center。相反，你必须添加这两个属性

left:50%; margin-left:-22.5%;

左：50％属性会将元素与中心对齐。比你将你的元素移动到它的负半部分以完全居中

如何将盒子放在中间位置？

2 个答案: