Forums

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

Home Forums CSS Center a table of buttons on any screen size

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

    Hi Everyone.

    Pretty new to all of this so looking for your help :)

    I am trying get the buttons to stay in the center of a webpart no matter what screen size it is displayed in.

    Currently it only stays to one side.

    Check out the link to CodePen to see code: https://codepen.io/danielcooper44/pen/gejaMz

    Any advice would be great!

    Thanks

    #269269
    Paulie_D
    Member

    The first rule of centering is don’t use float

    However, if you change the width of the container and add margin:auto you can fix this.

    https://codepen.io/Paulie-D/pen/PRBZJo

    #269273
    ashleigh
    Participant

    Maybe give your #button_container text-align:center; to centre the container and margin: 0 auto; to centre its contents

    And I would say rather than have float:right; on your .button elements, make them display:inline-block;

    If you want to look ok across smaller screens, I’d then amend the width:700px; of the #button_container to be max-width:700px; :)

    #269293
    crazybat
    Participant

    Give this a go. Like Paulie_D said, don’t use floats.

    https://codepen.io/anon/pen/OvwOJQ

    Note, I’ve always found using border: solid 1px red; helpful to visualize layout, margins, paddings, etc.

    Enjoy :)

    cb

    #269335
    ashleigh
    Participant

    Oops re my comment earlier, I wrote it the wrong way round: margin: 0 auto; centres the container and text-align:center; centres its contents :P

    #269337
    Beverleyh
    Participant

    Note, I’ve always found using border: solid 1px red; helpful to visualize layout, margins, paddings, etc.

    It can be, although be aware that borders affect the box model and add to the overall width, which can completely foo layouts in some circumstances (i.e. pushing blocks on to new lines when their accumulated width no longer fit their container, etc.). Using background-color (as Paulie_D did) or box-shadow to visualise boundaries/margins/paddings instead is often less intrusive.

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