Centering multiple divs (not grouped) within div - html

Question

I'm simply trying to center a block of divs (within a div) but I cannot seem to center it. I've tried solutions from here, but none of them work for me?
Structure:
<div id="content" class="email-prefs">
<div class="item"><!-- content -- ></div>
<div class="item"><!-- content -- ></div>
<div class="item"><!-- content -- ></div>
....
</div>
Any help would be appreciated! P.s. I'm trying to center the .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>

Answer 1

You need to wrap .item in a wrapper and set text-align: center to that wrapper
Remove float from .item and set 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>

Answer 2

Create a common div with class flex for all the three items and add the following styling for it
.flex{
display:inline-flex;
justify-content: center
}
and Remove the following css from email-prefs .item class
.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>

Answer 3

You want it like this?
Just removed 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>