CSS text-align only working when editing in chrome

1

Hello,

So this is something I came across when trying to align a h2 and a form at the same time.
Here is my html .

  <div class="sub-box">
        <h2>Get all the Latest Gaming News Here</h2>
        <form action="https://www.freecodecamp.com/email-submit" id="form">
            <input type="email" name="subscribe" placeholder="Enter your email address">
            <button id="submit" type="submit">Subscribe</button>
        </form>
    </div>

Here is my css.

/*sub box */

/*---doesn't work---
.sub-box {
    text-align: center;
}
*/

.sub-box h2,
form {
    text-align: center;
}

If I add text-align to my sub-box class in the chrome inspector it works fine. For some reason in my script it doesn’t. I tried finding an answer but can’t seem to find one or at least not in this css case.

Thanks for any help, feel free to direct me to some resources for better explanations.

2

Remove all your CSS and add this instead:

.sub-box {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
4

Thanks for an alternative. Any explanation on why text-align by itself doesn’t work?

5

https://jsfiddle.net/z5cyt0Lf/ It seems to work fine in JSFiddle. Is your provided code part of a wider project which may have other conflicting code?

1 Like
6

I have a nav class that I laid out using display: grid;.
Though I don’t see how that would interfere. I commented it out and still doesn’t work. I can’t see my proprety in chrome by inspecting it.https://ibb.co/MDdft99