CODEWITHSUNDEEP
htmlcss
Freddy
Freddy

Reputation: 867

Centering multiple divs (not grouped) within div

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>

Upvotes: 1

Views: 89

Answers (3)

Zuber
Zuber

Reputation: 3483

  • 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>

Upvotes: 2

Gowtham
Gowtham

Reputation: 1597

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>

Upvotes: 1

K. P.
K. P.

Reputation: 561

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>

Upvotes: 0

Related Questions