- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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.
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;
:)
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
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
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.