在 div 中居中多个 div（未分组）答案

【问题标题】：Centering multiple divs (not grouped) within div在 div 中居中多个 div（未分组）
【发布时间】：2018-11-03 12:39:57
【问题描述】：

我只是想将一个 div 块（在一个 div 内）居中，但我似乎无法将其居中。我试过solutions from here，但它们都不适合我？

结构：

<div id="content" class="email-prefs">
   <div class="item"><!-- content -- ></div>
   <div class="item"><!-- content -- ></div>
   <div class="item"><!-- content -- ></div>
   ....
</div>

任何帮助将不胜感激！附：我正在尝试将.item div 居中

#content {
  text-align: center;
  text-align: center;
  width: 100%;
  height: auto;
  border: 1px solid red;
}

.email-prefs .item {
  width: 27.0%;
  float: left;
  margin: 0;
  line-height: 25px;
  color: #36383d;
  font-family: Helvetica, sans-serif;
  padding: 10px;
  display: inline-block;
  margin: auto;
  border: 1px solid blue;
}

.subscribe-options {
  clear: both;
}

<div id="content" class="email-prefs">

    <p class="header">Uncheck the types of emails you do not want to receive:</p>
    <input type="hidden" name="subscription_ids" value="">

    <div class="item">
        <div class="item-inner  selected">
            <div class="checkbox-row">
                <span class="fakelabel">
                    <input id="id_896974" type="checkbox" name="id_896974" checked="checked">


                    <span>Food for Thought instant blog notification</span>
                </span>
            </div>
            <p>Be the first to read our new liveRES blog posts</p>
        </div>
    </div>

    <div class="item">
        <div class="item-inner  selected">
            <div class="checkbox-row">
                <span class="fakelabel">
                    <input id="id_1044442" type="checkbox" name="id_1044442" checked="checked">


                    <span>Food for Thought monthly blog roundup</span>
                </span>
            </div>
            <p>Must-read moments from the liveRES blog</p>
        </div>
    </div>

    <div class="item">
        <div class="item-inner  selected">
            <div class="checkbox-row">
                <span class="fakelabel">
                    <input id="id_4811083" type="checkbox" name="id_4811083" checked="checked">


                    <span>Industry insights and research</span>
                </span>
            </div>
            <p>Keep on top of the latest hospitality facts and figures</p>
        </div>
    </div>





  



  <div class="subscribe-options" style="margin-right: 0">
    <p class="header">Or check here to never receive any emails:</p>
    <p>
      <label for="globalunsub">
                              <input name="globalunsub" id="globalunsub" type="checkbox">
                              <span>
                                  Unsubscribe me from all mailing lists.
                              </span>
                          </label>
    </p>
  </div>
  <input type="submit" class="hs-button primary" id="submitbutton" value="Update email preferences">

  <div class="clearer"></div>
</div>

【问题讨论】：

因为您将它们向左浮动？删除它，它应该可以工作。如果你想在每个之后都有行空间，那么要么使用 br 要么使用自动边距使它们阻塞

标签： html css

【解决方案1】：

您需要将.item 包装在一个包装器中，并将text-align: center 设置为该包装器
从.item 中删除float 并设置vertical-align: top

#content {
  text-align: center;
  text-align: center;
  width: 100%;
  height: auto;
  border: 1px solid red;
}
.item-wrapper {
    text-align: center;
}
.email-prefs .item {
  width: 27.0%;
  /* float: left; */
  /* margin: 0; */
  line-height: 25px;
  color: #36383d;
  font-family: Helvetica, sans-serif;
  padding: 10px;
  display: inline-block;
  margin: auto;
  border: 1px solid blue;
  vertical-align: top;
}

.subscribe-options {
  clear: both;
}

<div id="content" class="email-prefs">

  <p class="header">Uncheck the types of emails you do not want to receive:</p>
  <input type="hidden" name="subscription_ids" value="">

  <div class="item-wrapper">
    <div class="item">
    <div class="item-inner  selected">
      <div class="checkbox-row">
        <span class="fakelabel">
                                      <input id="id_896974" type="checkbox" name="id_896974" checked="checked">
                                      
                                      
                                      <span>Food for Thought instant blog notification</span>
        </span>
      </div>
      <p>Be the first to read our new liveRES blog posts</p>
    </div>
  </div>

  <div class="item">
    <div class="item-inner  selected">
      <div class="checkbox-row">
        <span class="fakelabel">
                                      <input id="id_1044442" type="checkbox" name="id_1044442" checked="checked">
                                      
                                      
                                      <span>Food for Thought monthly blog roundup</span>
        </span>
      </div>
      <p>Must-read moments from the liveRES blog</p>
    </div>
  </div>

  <div class="item">
    <div class="item-inner  selected">
      <div class="checkbox-row">
        <span class="fakelabel">
                                      <input id="id_4811083" type="checkbox" name="id_4811083" checked="checked">
                                      
                                      
                                      <span>Industry insights and research</span>
        </span>
      </div>
      <p>Keep on top of the latest hospitality facts and figures</p>
    </div>
  </div>
  </div>





  



  <div class="subscribe-options" style="margin-right: 0">
    <p class="header">Or check here to never receive any emails:</p>
    <p>
      <label for="globalunsub">
                              <input name="globalunsub" id="globalunsub" type="checkbox">
                              <span>
                                  Unsubscribe me from all mailing lists.
                              </span>
                          </label>
    </p>
  </div>
  <input type="submit" class="hs-button primary" id="submitbutton" value="Update email preferences">

  <div class="clearer"></div>
</div>

【讨论】：

【解决方案2】：

为所有三个项目创建一个具有 flex 类的通用 div，并为其添加以下样式

.flex{
display:inline-flex;
justify-content: center
}

并从 email-prefs .item 类中删除以下 css

.email-prefs .item {
 /*margin: auto;Remove this line*/
}

#content {
  text-align: center;
  text-align: center;
  width: 100%;
  height: auto;
  border: 1px solid red;
}
.flex{
display:inline-flex;
justify-content: center
}
.email-prefs .item {
  width: 27.0%;
  float: left;
  margin: 0;
  line-height: 25px;
  color: #36383d;
  font-family: Helvetica, sans-serif;
  padding: 10px;
  display: inline-block;
  /*margin: auto;Remove this line*/
  border: 1px solid blue;
}

.subscribe-options {
  clear: both;
}

<div id="content" class="email-prefs">
   <p class="header">Uncheck the types of emails you do not want to receive:</p>
   <input type="hidden" name="subscription_ids" value="">
   <div class="flex">
   <div class="item">
      <div class="item-inner  selected">
         <div class="checkbox-row">
            <span class="fakelabel">
            <input id="id_896974" type="checkbox" name="id_896974" checked="checked">
            <span>Food for Thought instant blog notification</span>
            </span>
         </div>
         <p>Be the first to read our new liveRES blog posts</p>
      </div>
   </div>
   <div class="item">
      <div class="item-inner  selected">
         <div class="checkbox-row">
            <span class="fakelabel">
            <input id="id_1044442" type="checkbox" name="id_1044442" checked="checked">
            <span>Food for Thought monthly blog roundup</span>
            </span>
         </div>
         <p>Must-read moments from the liveRES blog</p>
      </div>
   </div>
   <div class="item">
      <div class="item-inner  selected">
         <div class="checkbox-row">
            <span class="fakelabel">
            <input id="id_4811083" type="checkbox" name="id_4811083" checked="checked">
            <span>Industry insights and research</span>
            </span>
         </div>
         <p>Keep on top of the latest hospitality facts and figures</p>
      </div>
   </div>
   </div>
   <div class="subscribe-options" style="margin-right: 0">
      <p class="header">Or check here to never receive any emails:</p>
      <p>
         <label for="globalunsub">
         <input name="globalunsub" id="globalunsub" type="checkbox">
         <span>
         Unsubscribe me from all mailing lists.
         </span>
         </label>
      </p>
   </div>
   <input type="submit" class="hs-button primary" id="submitbutton" value="Update email preferences">
   <div class="clearer"></div>
</div>

【讨论】：

【解决方案3】：

你想要这样吗？

刚刚删除float:left;

#content {
  text-align: center;
  text-align: center;
  width: 100%;
  height: auto;
  border: 1px solid red;
}

.email-prefs .item {
  width: 27.0%;
  
  margin: 0;
  line-height: 25px;
  color: #36383d;
  font-family: Helvetica, sans-serif;
  padding: 10px;
  display: inline-block;
  margin: auto;
  border: 1px solid blue;
}

.subscribe-options {
  clear: both;
}

<div id="content" class="email-prefs">

  <p class="header">Uncheck the types of emails you do not want to receive:</p>
  <input type="hidden" name="subscription_ids" value="">

  <div class="item">
    <div class="item-inner  selected">
      <div class="checkbox-row">
        <span class="fakelabel">
                                      <input id="id_896974" type="checkbox" name="id_896974" checked="checked">
                                      
                                      
                                      <span>Food for Thought instant blog notification</span>
        </span>
      </div>
      <p>Be the first to read our new liveRES blog posts</p>
    </div>
  </div>

  <div class="item">
    <div class="item-inner  selected">
      <div class="checkbox-row">
        <span class="fakelabel">
                                      <input id="id_1044442" type="checkbox" name="id_1044442" checked="checked">
                                      
                                      
                                      <span>Food for Thought monthly blog roundup</span>
        </span>
      </div>
      <p>Must-read moments from the liveRES blog</p>
    </div>
  </div>

  <div class="item">
    <div class="item-inner  selected">
      <div class="checkbox-row">
        <span class="fakelabel">
                                      <input id="id_4811083" type="checkbox" name="id_4811083" checked="checked">
                                      
                                      
                                      <span>Industry insights and research</span>
        </span>
      </div>
      <p>Keep on top of the latest hospitality facts and figures</p>
    </div>
  </div>





  



  <div class="subscribe-options" style="margin-right: 0">
    <p class="header">Or check here to never receive any emails:</p>
    <p>
      <label for="globalunsub">
                              <input name="globalunsub" id="globalunsub" type="checkbox">
                              <span>
                                  Unsubscribe me from all mailing lists.
                              </span>
                          </label>
    </p>
  </div>
  <input type="submit" class="hs-button primary" id="submitbutton" value="Update email preferences">

  <div class="clearer"></div>
</div>

【讨论】：

您应该解释为什么您的代码有效。另外，尝试将 vertical-align-top 添加到 inllne-block div。
我确实解释了...刚刚删除了浮动。另外，我不会添加代码来回答这实际上不是我的
不..这解释了你做了什么......而不是为什么元素现在居中。
我不想失礼什么的，但我想问一下你为什么只要求我解释？其他两个回答的用户也没有解释，他们也只是提到了他们做了什么。