使用CSS使HTML表格居中 [重复] 。

Question

这个问题在这里已经有了答案:

Bootstrap 4中心垂直和水平对齐方式 (10个答案)

如何将一个<div&gt.水平居中？ (108个答案)

Flexbox：水平和垂直居中。 (12个答案)

封闭 3个月前.

我看了很多关于如何做到这一点的帖子，但是并应用了那里的东西，但仍然在努力做到这一点，文本确实得到居中，但实际元素仍然留在屏幕的左边。

该表格。

<div class="row">
        <div class="col-md-6">
            <div class="formdiv">
                <form id="my-form" method="post">
                    <div asp-validation-summary="All" class="text-danger"></div>
                    <div class="form-group">
                        <label asp-for="OrderEmail"></label>
                        <br />
                        <input asp-for="OrderEmail" />
                    </div>
                    <button id="update-profile-button" type="submit" class="btn btn-primary">Send</button>
                </form>
            </div>
        </div>
    </div>

CSS:

.formdiv {
    display: block;
    text-align: center;
}

#my-form {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

Answer 1

试试这个。

<div class="container">
 <div class="row">
  <div class="col-md-6 mx-auto">
   <div class="formdiv">
    <form id="treatment-form" method="post">
     <div asp-validation-summary="All" class="text-danger"></div>
      div class="form-group">
       <label asp-for="OrderEmail"></label>
       <br />
       <input asp-for="OrderEmail" />
      </div>
      <button id="update-profile-button" type="submit" class="btn btn-primary">Send Email</button>
     </form>
    </div>
   </div>
  </div>
</div>

Answer 2

如果你想把按钮排在文字输入的中心 那么答案就在这里了。否则，请告诉我。

<div class="row">
    <div class="col-md-6">
        <div class="formdiv">
            <form id="treatment-form" method="post">
                <div asp-validation-summary="All" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="OrderEmail"></label>
                    <br />
                    <input asp-for="OrderEmail" />
                </div>
                <button id="update-profile-button" type="submit" class="btn btn- 
 primary">Send Email</button>
            </form>
        </div>
    </div>
</div>

和CSS

#treatment-form {
     display: inline-block;
     margin-left: auto;
     margin-right: auto;
     text-align: left;
}
.formdiv {
     display: block;
     text-align: center;

}
#update-profile-button{
     margin-left:40px;
}

Answer 3

如果你说的是这样的事情。

如果你说的是这样的事情：那么这里是如何使用flexbox来完成的。

#treatment-form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

<div class="row">
  <div class="col-md-6">
    <div class="formdiv">
      <form id="treatment-form" method="post">
        <div asp-validation-summary="All" class="text-danger"></div>
        <div class="form-group">
          <label asp-for="OrderEmail"></label>
          <br />
          <input asp-for="OrderEmail" />
        </div>
        <button id="update-profile-button" type="submit" class="btn btn-primary">Send Email</button>
      </form>
    </div>
  </div>
</div>

如果你想让输入框中的文字居中，可以在输入框中添加text-align属性，并将中心作为值。https:/codepen.iothoughtlessmindpenQWjvOZZ?editors=1100。

Answer 4

利用位置，你可以做到这一点

.formdiv{
    top:0;
    right:0;
    bottom:0;
    left:0;
    position:absolute;
    margin:auto;
    width: 200px;
    height:100px;
}

#treatment-form {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#update-button{
    display: flex;
    align-items: center;
    justify-content: center;
  
}

<div class="row">
        <div class="col-md-6">
            <div class="formdiv">
                <form id="treatment-form" method="post">
                    <div asp-validation-summary="All" class="text-danger"></div>
                    <div class="form-group">
                        <label asp-for="OrderEmail"></label>
                        <br />
                        <input asp-for="OrderEmail" />
                    </div>
                    <div id="update-button">
                    <button id="update-profile-button" type="submit" class="btn btn-primary">Send Email</button>
                    </div>
                </form>
            </div>
        </div>
    </div>