Question 255880 in Html Question posted in
Some basic documentation can be found here.

Html – i can't fully center the element

I have a design for a radio input that has a circle in the middle with the pseudo element ::before

But when I make the input size an odd number, it is not completely centered

It appears more in smaller sizes

.input-radio { 
    display: flex;
    gap:  10px;
    height: fit-content;
}

.input-radio-button {
    --Primary-color:#07f;
    display: block;

    --size:15px;
    width: var(--size,10px);
    height: var(--size,10px);
    font-size: 13px;
    aspect-ratio: 1;
    border: var(--border-length,calc(var(--size,10px) / 7)) var(--Primary-color,#07f) solid;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: none;
    flex-grow: 0;
    flex-shrink: 0;
}

.input-radio-button::before { 
    content: "";
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--Primary-color);
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: Fontawesome;
    font-size: 1.2em;
    color: var(--Primary-color);
    translate: -50% -50%;
    transition: scale .2s .1s;
}
<div class="input input-radio checked"> 
    <button class="input-radio-button"></button> <!-- the radio button -->
    <label  class="input-radio-label">banana</label>
</div>
Tags:

2

Answers


  1. 0

    I briefly put a parent element and centered it vertically. it is the simplest solution.

    .v-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    <div class="v-center">
      <button class="input-radio-button"></button> <!-- the radio button -->
</div>

    I have applied and demonstrated below.

    .input-radio { 
    display: flex;
    gap:  10px;
    height: fit-content;
}

.v-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.input-radio-button {
    --Primary-color:#07f;
    display: block;

    --size:15px;
    width: var(--size,10px);
    height: var(--size,10px);
    font-size: 13px;
    aspect-ratio: 1;
    border: var(--border-length,calc(var(--size,10px) / 7)) var(--Primary-color,#07f) solid;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: none;
    flex-grow: 0;
    flex-shrink: 0;
}

.input-radio-button::before { 
    content: "";
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--Primary-color);
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: Fontawesome;
    font-size: 1.2em;
    color: var(--Primary-color);
    translate: -50% -50%;
    transition: scale .2s .1s;
}
    <div class="input input-radio checked"> 
    <div class="v-center">
      <button class="input-radio-button"></button> <!-- the radio button -->
    </div>
    <label  class="input-radio-label">banana</label>
</div>
    Login or Signup to reply.
  2. 0

    centered without altering the HTML, just add align-items: center; to .input-radio

    .input-radio { 
    display: flex;
    align-items: center;
    gap:  10px;
    height: fit-content;
}

.input-radio-button {
    --Primary-color:#07f;
    display: block;

    --size:15px;
    width: var(--size,10px);
    height: var(--size,10px);
    font-size: 13px;
    aspect-ratio: 1;
    border: var(--border-length,calc(var(--size,10px) / 7)) var(--Primary-color,#07f) solid;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: none;
    flex-grow: 0;
    flex-shrink: 0;
}

.input-radio-button::before { 
    content: "";
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--Primary-color);
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: Fontawesome;
    font-size: 1.2em;
    color: var(--Primary-color);
    translate: -50% -50%;
    transition: scale .2s .1s;
}
    <div class="input input-radio checked"> 
    <button class="input-radio-button"></button> <!-- the radio button -->
    <label  class="input-radio-label">banana</label>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search