CSS center radio buttons

#1

I’ve been learning CSS for weeks. And I have an issue about centering my radio buttons. They look like centered, but not perfectly centered)) And you can easily see it, when you open it though phone size.
The issue is about padding-left: 120px;
So I’m looking for solutions, that way this buttons going to look perfectly centered in any devices :heart_eyes:
I appreciate for your attention and help, here is my radio buttons:

About the buttons:
I got really inspired by Pinterest(dribble buttons) . And wanted to make something which is close to this in the picture. Although it’s still far from the end point. I didn’t see the main code for it and there are no tutorials for this particular buttons. I want to add it at the end to my twitch project. And now when I try to center everything, this buttons giving me hard time)) I’ve also tried by wrapping everything in a div, and move to the center. It works, but only for the desktop, and for small sizes looks awful.

D9549612-1EEA-478F-9D79-9DDC296EF513
D9549612-1EEA-478F-9D79-9DDC296EF5131242×1197 126 KB

#2

Your first problem is that your container is position relative and your buttons are absolute. The buttons aren’t even in the container to begin with. Aside from that, there are several approaches you could try. Using media-queries to shrink the buttons and padding is one way if you don’t want to redo your other markup. A better approach would probably be to go away from your current form of padding and pixels and adopt a more fluid approach using percentage based widths and/or flexbox.

Also, did you copy the code from somewhere? I ask because the buttons look very nice, and often if you do copy from a tutorial or something they have very strict pixel based positions and such that can break when you try to copy them, like you are experiencing. If you did, you might want to see if you can create your own markup and then modify the styles to work with your ideas.

#3

The buttons has to be absolute, and container relative, other ways won’t be able to trick the css))

I tried percentages, but for the particular buttons doesn’t look good on the phone. I really want to stick to the px.

I didn’t copy paste this code)) I got the base code from w3schools, the rest of the code thanks for google.com and http://stackoverflow.com and mixing all in my head))

1 Like
#4

Cool, I’ll fork your project and see if I can play around with it and get something to work.

#5

Okey. Here you go, I think I was able to get it working for you.

Here are the modifications with explanations. You can, of course, view the full code in CodePen.

/* make body have full viewport */
html, body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}

/* Create a parent container for the child containers.
 * Take up full viewport (you can change this on other projects obviously)
 * Center the child items using flexbox.
 */
.bigContainer {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

/* give container height and width properties */
.container {
  position: relative;
  height: 100px;
  width: 100px;
}

/* Use margin to separate containers.
 * No margin on last element.
 */
.container:not(:last-of-type) {  
    margin-right: 20px;
}

/* Do not display radio button */
.container input {
  display: none;
}

/* Center this checkmark inside the container */
.checkmark {
    position: absolute;
    top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Like I mentioned earlier, your biggest problems were positioning. Here is a crude drawing of what the elements of your pen actually looked like:

TtdtQDv3TUOCydwxnp748Q.png1024×553 35.6 KB

If you want to see yourself, I recommend highlighting the elements in developer tools to see where they all are. Your containers had no height or width, just padding. Your radio buttons were not even inside the containers, but were below them. Your containers were also not centered, but at the top left. It is hard to center elements with position absolute and relative if you don’t have the inside containers centered correctly.

Here is what my changes did:

aQ28eq0VTImEPWn0xa4msw.png1044×682 39.8 KB

I made a big container which centered all of the elements inside it. I then gave each of the containers dimensions of 100px. I put the radio buttons inside them and centered them. I then made sure the margin wasn’t applied to the last element.

I hope this helps you understand the problem, please let me know if it helped or you are still struggling!

Also, congrats on styling the buttons from dribbble - they look really great! :smiley:

1 Like
#6

I’m speechless… Thank you :relaxed:

1 Like
#7