我只是试图将一块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>
答案 0 :(得分：2)
.item并将text-align: center设置为该包装器float移除.item并设置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>
答案 1 :(得分：1)
为所有三个项目创建一个带有 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>
答案 2 :(得分：0)
你想要这样吗？
刚删除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>