Horizontally centering a div within a div

Question

I'm working on including a shortcode on the footer of my Wordpress website so that users may sign up to my newsletter.

I managed to include the shortcode itself on the footer, although I can't get it horizontally centered, it seems stuck on the left side. As you can see, I've created a class with two IDs inside of it, the first one with some written text and the second one with the form. The written text is centered, but I can't find the right way to center the form.

I tried different potential solutions, such as this, this and this, but none of them got it properly centered, it always stays off. I'm sure the solution must be simple, I just can't see it.

Non working code (solution is shown below):

.tnp-subscription-minimal input[type=submit] {
  background-color: #224b37!important;
  color: #ffffff;
  font: Poppins, sans-serif;
  font-weight: bold;
  margin: 0 auto;
  border: none;
  padding: 0 30px;
  border-radius: 5px;
  letter-spacing: 1px;
  font-size: 14px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  box-sizing: border-box;
  margin-left: 2px;
  transition: all 0.23s ease-in-out 0s;
}

.tnp-subscription-minimal input[type=email] {
  font-family: Poppins, sans-serif;
  border: none;
  padding: 15px;
  width: 50%;
  font-size: 14px;
  margin-right: 5px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 5px;
  color: #343434;
  background-color: #fff;
  box-sizing: border-box;
}

#inscripcion {
  font-size: 16px;
  font: Poppins, sans-serif;
  font-weight: 600;
  margin: 0 0 20px;
  color: #000000;
  text-align: center;
}

<div class=“newsletter-wrapper” style="position: sticky; background-color:#c2cdc8; padding:60px 30px 60px 30px; width: 100%;">
  <div id="inscripcion" style="absolute: sticky; left: 50%; top: 50%; z-index: 9999">¿Quieres recibir todos mis posts? ⦙ <br> Do you want to receive my posts?</div>
  <div id="formulario-newsletter"  style="absolute: sticky; left: 50%; top: 50%;">
    <form calss="tnp-subscription-minimal">
      <input type="email" /> <button type="submit">OK!</button>
    </form>
  </div>
</div>

I deliberately left the previous, non-working code in case it helps someone in a similar situation, this is how it ended up looking (and working properly):

.tnp-subscription-minimal input[type=submit] {
  background-color: #224b37!important;
  color: #ffffff;
  font: Poppins, sans-serif;
  font-weight: bold;
  margin: 0 auto;
    width: 16%;
  border: none;
  padding: 0 0px;
  border-radius: 5px;
  letter-spacing: 1px;
  font-size: 14px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  box-sizing: border-box;
  margin-left: 2px;
  transition: all 0.23s ease-in-out 0s;
}

.tnp-subscription-minimal input[type=email] {
  font-family: Poppins, sans-serif;
  border: none;
  padding: 15px;
  width: 68%;
  font-size: 14px;
  margin-right: 5px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 5px;
  color: #343434;
  background-color: #fff;
  box-sizing: border-box;
}

#inscripcion {
  font-size: 16px;
  font: Poppins, sans-serif;
  font-weight: 600;
  margin: 0 0 20px;
  color: #000000;
  text-align: center;
}

#formulario-newsletter {
  text-align: center;
}

<div class=“newsletter-wrapper” style="position: sticky; background-color:#c2cdc8; padding:45px 30px 60px 30px; width: 100%; display: flex; flex-direction: column; align-items: center;">
  <div id="inscripcion" style="z-index: 9999">¿Quieres recibir todos mis posts? ⦙ <br> Do you want to receive my posts?</div>
  <div id="formulario-newsletter">
<?php echo do_shortcode('[newsletter_form type="minimal"]'); ?> 
  </div>
</div>

`#formulario-newsletter {text-align:center}` will do what you want, as will any of the other usual centering techniques. I'm not seeing anything here that makes this not a duplicate of all three questions you linked to. (`absolute: sticky` is amusing but not a thing; that would be `position: absolute` or `position: sticky`, but you shouldn't use either of those rules here.) — Daniel Beck, Mar 12 '23 at 12:44
I tried to make a [mcve] Please post the relevant HTML for the form instead of PHP — mplungjan, Mar 12 '23 at 12:46
Thanks a lot! Sometimes the easiest of solutions and the most obvious of mistakes are just in front of us, I really appreciate your insight! — imthemoisturizer, Mar 12 '23 at 17:03

Waradu · Answer 1 · 2023-03-12T13:53:53.473

2

Add this to css

#formulario-newsletter {
  display: grid;
  place-items: center;
}

and change the html to this:

<div class=“newsletter-wrapper” style="position: sticky; background-color:#c2cdc8; padding:60px 30px 60px 30px; width: 100%;">
    <div id="inscripcion">¿Quieres recibir todos mis posts? ⦙ <br> Do you want to receive my posts?</div>
    <div id="formulario-newsletter">
        <form class="tnp-subscription-minimal"> <!--btw u wrote calss instead of class-->
            <input type="email" /> <button type="submit">OK!</button>
        </form>
    </div>
</div>

That should work.

edited Mar 12 '23 at 13:53

answered Mar 12 '23 at 13:47

Waradu

154
9

Thank you so much! Now I can't believe I didn't even notice the "calss", I really appreciate your insights! – imthemoisturizer Mar 12 '23 at 17:05

score 1 · Accepted Answer · answered Mar 12 '23 at 13:39

First, as a comment said, absolute: sticky is not an actual tag, it's position: absolute or position: sticky.

Next, position: sticky only has to be used on the parent element, not the child elements as well.

And to answer your question, simply remove "position" and "top", "left" attributes from the child elements and add the following attributes to the parent element:

display: flex;
flex-direction: column;
align-items: center;

I also made the modifications to your code, so you can see it working:

.tnp-subscription-minimal input[type=submit] {
  background-color: #224b37!important;
  color: #ffffff;
  font: Poppins, sans-serif;
  font-weight: bold;
  margin: 0 auto;
  border: none;
  padding: 0 30px;
  border-radius: 5px;
  letter-spacing: 1px;
  font-size: 14px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  box-sizing: border-box;
  margin-left: 2px;
  transition: all 0.23s ease-in-out 0s;
}

.tnp-subscription-minimal input[type=email] {
  font-family: Poppins, sans-serif;
  border: none;
  padding: 15px;
  width: 50%;
  font-size: 14px;
  margin-right: 5px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 5px;
  color: #343434;
  background-color: #fff;
  box-sizing: border-box;
}

#inscripcion {
  font-size: 16px;
  font: Poppins, sans-serif;
  font-weight: 600;
  margin: 0 0 20px;
  color: #000000;
  text-align: center;
}

<div class=“newsletter-wrapper” style="position: sticky; background-color:#c2cdc8; padding:60px 30px 60px 30px; width: 100%; display: flex; flex-direction: column; align-items: center;">
  <div id="inscripcion" style="z-index: 9999">¿Quieres recibir todos mis posts? ⦙ <br> Do you want to receive my posts?</div>
  <div id="formulario-newsletter">
    <form calss="tnp-subscription-minimal">
      <input type="email" /> <button type="submit">OK!</button>
    </form>
  </div>
</div>

Thank you so much! I just wasn't able to see the solution, so I really appreciate your cooperation :) — imthemoisturizer, Mar 12 '23 at 17:05

Horizontally centering a div within a div

2 Answers2