Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Trying to center

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #193448
    smeeker
    Participant

    I’m trying to center the “click here” button, the text below the button and the image within the box. I’ve tried using the margin-left:auto; and margin-right:auto; within several different elements but it’s not budging. Any ideas?

    http://codepen.io/smeeker/pen/wBJYYe

    #193449
    Paulie_D
    Moderator
    #193450
    smeeker
    Participant

    Thank you! I’ve also removed the <li> bullet as well. I’m wondering though, why the text under the “click here” button and the image are not centering to the overall box. They’re shifted to the right a bit. I’ve checked the spacing and removed the padding that was there within .box element but that didn’t help.

    http://codepen.io/smeeker/pen/wBJYYe

    #193455
    Shikkediel
    Participant

    I don’t really see where the extra width originates but it helps to set padding: 0 at least as far down as the nested ul.

    #193468
    Paulie_D
    Moderator

    You should probably start with a universal reset

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    

    That helps a lot.

    http://codepen.io/Paulie-D/pen/bNqXey

    I’d also prefer a p or a heading to a span for the .city…something block level. I’ve outlined it in red so you can see the difference.

    #193491
    smeeker
    Participant

    That worked perfect…thank you! Then it was easy to make other padding adjustments from there.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.