Question

Website where the issue exists 当您登录时（用户名：男性/密码：男性），您会在右侧看到侧边栏。我已尽力而为，但我无法将右侧的按钮列居中。如果您检查元素，您可以看到我将margin-left和margin-right设置为auto，但它根本不起作用。 我怎样才能让课程中心＆＃34; optionsWrapper＆＃34;在课堂上＆＃34;选项＆＃34;？另外，如果窗口的话，我如何制作课程＆＃34;选项＆＃34;的高度？我现在100％使用它，但是当我测试时，它的高度要么太长，要么太短，具体取决于查看网站的屏幕尺寸。

注意：它在Chrome上看起来有点好，但在Firefox和Safari上它看起来很糟糕，我不明白为什么。真的很感激任何帮助！

HTML设置：

      <div class='options'>
          <div class='optionsWrapper'>
              <div class='toggleButton' id='white'>
              </div>

              <div class='toggleButton'  id='yellow'>
              </div>

              <div class='toggleButton'  id='green'>
              </div>

              <div class='toggleButton'  id='red'>
              </div>

              <div class='toggleButton'  id='blue'>
                <a href="https://www.google.com/"><img class='settings_icon' src="Icons/Set 1/PNG/7.png"></a>
              </div>
          </div>
      </div>

CSS设置：

.options{
  float: right;
  width: 100px;
  height: 100%;
  background: #444444 url("http://nickbrombal.com/images/bg_pixel-grey.jpg") repeat fixed;
  padding-top: 1.2%;
}

.optionsWrapper {
margin-left:auto;
margin-right:auto;
top: 50%;
position: absolute;
transform: translate(25%, -50%);
}

.toggleButton{
  width: 100%;
  height: 66px;
  margin-bottom: 30px;
  -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
  cursor: pointer;
}

Answer 1

我只看到绿色按钮的一半。（在Firefox中测试。）

从height规则中删除.options样式，然后从position规则中删除top，transform和.optionsWrapper样式。按钮现在至少出现了。

自动边距似乎不起作用的原因是按钮占据了父节点的整个宽度，因此当边距实际工作时，将两个相等部分中的零除以零仍为零。如果您为按钮指定宽度，例如width: 65px，则会看到它们居中。

我怎么能把div里面的div居中呢？自动边距不起作用

1 个答案: