Question

我有一些HTML代码，目前让我头疼不已。基本上，网页是一个表格，中间有一个字段框，字段框后面有一个“提交”按钮，表格上方是两行文字。

我已经尝试过text-align：center两个文本，对于两行文本，它似乎将它们对齐为居中，但不是居中到页面的中间（我也试图让它响应）

提交按钮只保持居中，除非我把它带到我不想做的字段框中。这是我的代码：

.divvy {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -150px;
}

#inputBox {
  clear: both;
  background-color: rgba( 0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  color: #dbdbdb;
  font-weight: bold;
  width: 12em;
  padding-left: 0.2em;
  text-align: left;
}

#title {
  color: white;
}

#formy {
  color: #c6c6c6;
  background-color: #727272;
  background-color: rgba( 0, 0, 0, 0.5);
  border-radius: 1.2em;
  text-align: center;
  padding: 0.35em 1.25em 0.75em 0.75em;
  border: 0.1em solid;
  border-color: #727272;
  border-color: rgba(0, 0, 0, 0.3);
  width: 100%;
}

<div class="divvy" ng-repeat="slider in main.products">
  <div>
    <h3 align="center" id="title">TitleTitleTitle</h3>
    <h4 align="center">Subtitle Subtitle Subtitle</h4>
  </div>
  <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
    <fieldset id="formy">
      Name: <input id="inputBox" type="text" class="hvr-underline-reveal" required><br> Email: <input id="inputBox" type="text" required><br> Tourist <input type="radio" name="livingStatus" value="Tourist"> Resident <input type="radio" name="livingStatus"
        value="Resident">
    </fieldset>
    <input margin="0 auto" display="block" width="2em" text-align="center" type="submit" class="btn btn-default hvr-back-pulse" value="Submit">
  </form>
</div>

我唯一希望保持足够的效果的是“divvy”类，它使形式可靠地位于屏幕的中心。如果还有其他方法可以帮助我，请告诉我，因为我认为这可能会弄乱其他元素。

这是一个plunker链接：https://plnkr.co/edit/H4uhcU

Answer 1

只需添加以下CSS。

input.btn.hvr-back-pulse {
  margin: 0 auto;
  display: block;
}

Answer 2

这是因为您的box-sizing是content-box（在不添加边距/填充/边框的情况下计算元素的宽度）。

要解决您的问题，一种简单的方法是使用border-box并将其应用于所有元素

* {
 box-sizing: border-box;
}

* {
 box-sizing: border-box;
}
.divvy {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -100px 0 0 -150px;
}

#inputBox {
  clear: both;
  background-color: rgba( 0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  color: #dbdbdb;
  font-weight: bold;
  width: 12em;
  padding-left: 0.2em;
  text-align: left;
}

#title {
  color: white;
}

#formy {
  color: #c6c6c6;
  background-color: #727272;
  background-color: rgba( 0, 0, 0, 0.5);
  border-radius: 1.2em;
  text-align: center;
  padding: 0.35em 1.25em 0.75em 0.75em;
  border: 0.1em solid;
  border-color: #727272;
  border-color: rgba(0, 0, 0, 0.3);
  width: 100%;
}

<div class="divvy" ng-repeat="slider in main.products">
  <div>
    <h3 align="center" id="title">TitleTitleTitle</h3>
    <h4 align="center">Subtitle Subtitle Subtitle</h4>
  </div>
  <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
    <fieldset id="formy">
      Name: <input id="inputBox" type="text" class="hvr-underline-reveal" required><br> Email: <input id="inputBox" type="text" required><br> Tourist <input type="radio" name="livingStatus" value="Tourist"> Resident <input type="radio" name="livingStatus"
        value="Resident">
    </fieldset>
    <input margin="0 auto" display="block" width="2em" text-align="center" type="submit" class="btn btn-default hvr-back-pulse" value="Submit">
  </form>
</div>

Answer 3

您是否尝试过使用中心标签？

<div ng-repeat="slider in main.products">
  <center>
    <h3 id="title">TitleTitleTitle</h3>
    <h4>Subtitle Subtitle Subtitle</h4>


    <form name="reviewForm" ng-controller="ReviewController as reviewCtrl"
    ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
      <fieldset id="formy" >


        Name: <input  id="inputBox" type="text" class="hvr-underline-reveal" required><br>
        Email: <input  id="inputBox" type="text" required><br>
        Tourist <input  type="radio" name="livingStatus" value="Tourist">   Resident <input type="radio" name="livingStatus" value="Resident">


      </fieldset>

      <input margin="0 auto" display="block" width="2em" text-align="center" type="submit" class="btn btn-default hvr-back-pulse" value="Submit">

    </form>



  </center>
</div>

现在，我知道表单看起来太宽了，但现在你可以继续将表单设置为你想要的样式。

无法正确居中，且保证金：0自动/保证金：自动无效

3 个答案: