Question

我正在使用freeCodeCamp，目前正在对网站进行逆向工程。然而，课程中没有涉及的一件事是定位元素，特别是以它们为中心。我无法让我的按钮看起来像示例项目。我不确定如何将标签置于按钮上方，然后在当前值的左侧和右侧添加加号和减号按钮。我可以看到示例中的代码，但我只是不明白什么是什么以及如何最终很好地集中所有内容。这是我的目标： http://codepen.io/GeoffStorbeck/pen/RPbGxZ/

这是我的代码： http://codepen.io/Dordan/pen/GpVvXm

HTML：

<div class="session">
    <div class="col-xs-3">
    </div>
    <div class="col-xs-6">
      <div class="break">
        <h6>BREAK LENGTH</h6>
        <button class="clock-button" id="minusBreakTime">
          -
        </button>
        <h2>0</h2>
        <button class="clock-button" id="addBreakTime">
          +
        </button>
      </div>
      <div class="session">
        <h6>SESSION LENGTH</h6>
        <button class="clock-button" id="minusSessionTime">
          -
        </button>
        <h2>0</h2>
        <button class="clock-button" id="addSessionTime">
          +
        </button>
      </div>
    </div>
    <div class="col-xs-3">
    </div>
  </div>

CSS：

.content {
  margin: auto;
  width: 75%;
  text-align: center;
}

.clock-button {
  border: none;
  background: none;
}

.section {
  display: inline-block;
  margin: auto;
}

.breakB {
}

.sessionB {
}

Answer 1

您在按钮之间使用<h2>标签。标题是块级元素，它引起了＆＃34; +＆＃34;和＆＃34; - ＆＃34;按钮出现在自己的行上。将其更改为<span>，它将解决您的问题。标签似乎已经成为我的中心。

Answer 2

知道 class =“col-xs-12”表示容器的整个宽度，只需要两个带 class =“col-xs-6”的div

因此，您需要将HTML代码更改为：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lemon" />
  </head>
  
  <body>
    <div class="container-fluid content">
      <h2 class="title">Pomodoro Clock</h2>
      <div class="session">
        <div class="col-xs-6">
          <div class="break">
            <h6>BREAK LENGTH</h6>
            <button class="clock-button" id="minusBreakTime">
              -
            </button>
            <h2>0</h2>
            <button class="clock-button" id="addBreakTime">
              +
            </button>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="session">
            <h6>SESSION LENGTH</h6>
            <button class="clock-button" id="minusSessionTime">
              -
            </button>
            <h2>0</h2>
            <button class="clock-button" id="addSessionTime">
              +
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Answer 3

我的尝试：http://codepen.io/anon/pen/GpVwBK

您走在正确的轨道上，但如果您对特定HTML元素或CSS属性的工作原理感到好奇，我建议您在MDN上查找。他们的文档非常全面且易于阅读。

至于你想要达到的目标，看起来你很难将元素并排显示出来。有两种方法可以快速实现这一目标：display: inline-block和float: left。两者都非常相似，但是display: inline-block还有一个额外的好处，你可以使用vertical-align: middle来使元素垂直对齐，所以我将在这个例子中使用它：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lemon" />
  </head>

  <body>
    <div class="container-fluid content">
      <h2 class="title">Pomodoro Clock</h2>
      <div class="session">
        <div class="col-xs-3">
        </div>
        <div class="col-xs-6">
          <div class="break">
            <h6>BREAK LENGTH</h6>
            <div class="btns-container">
                <button class="clock-button" id="minusBreakTime">-</button>
                <h2>0</h2>
                <button class="clock-button" id="addBreakTime">+</button>
            </div>
          </div>
          <div class="session">
            <h6>SESSION LENGTH</h6>
            <div class="btns-container">
                <button class="clock-button" id="minusSessionTime">-</button>
                <h2>0</h2>
                <button class="clock-button" id="addSessionTime">+</button>
            </div>
          </div>
        </div>
        <div class="col-xs-3">
        </div>
      </div>
    </div>
  </body>
</html>

我将按钮包装在新的div btns-container中，以便我可以在display: inline-block内创建所有内容：

.btns-container > * {
  display: inline-block;
  vertical-align: middle;
}

.session .session,
.session .break {
  display: inline-block;
}

我也做了会话并将容器并排放置。

希望这有帮助。

Answer 4

尝试主div上的中心标记，例如：

<center>
<div> ... </div>
</center>

对于居中主要div中水平多个div，我喜欢：

<div style="float:left"> </div>

如果使用中心标记，文本应自动居中在div中，但您可以覆盖：

<p style="text-align:left"> ... </p>

如何正确定位元素并布置页面？

4 个答案: