CODEWITHSUNDEEP
cssradio-button
Yuniac
Yuniac

Reputation: 583

Radio button's label alignment

I'm trying to left align a list of radio buttons inside a centered form. I already found a similar question that suggested to use display: inline-block but does not seem to have any effect and still aligns the radio buttons at the left of the page. It currently renders as:

O Rainbow butterfiles O Brimstone  [Find more about it!]

But I want it to look like this:

     O Rainbow butterfiles 
     O Brimstone  
     [Find more about it!]

Here's the HTML and CSS I've been using:

.list {
  text-align: center;
  display: inline-block;
}
.item {
  text-align: left;
  display: inline-block;
}
<html lang="en">

<body>
  <form action="https://www.google.com/search">
    <div class="list">
      <div class="item">
        <input type="radio" name="q" id="common" value="rainbow butterflies">
        <label for="rainbow">Rainbow Butterflies</label>
      </div>
      <div class="item">
        <input type="radio" name="q" id="common" value="brimstone">
        <label for="brimstone">Brimstone</label>
      </div>
      <button type="submit">Find more about it!</button>
    </div>
  </form>
</body>

Upvotes: 1

Views: 1176

Answers (2)

Gerard
Gerard

Reputation: 15796

Please see below, using flexbox

form {
  display: flex;
  justify-content: center; /* Center on page */
}

.list {
  display: flex;
  flex-wrap: wrap; /* Will cause items/button to go to next line */
}

.item {
  width: 100%;
}
<form action="https://www.google.com/search">
  <div class="list">
    <div class="item">
      <input type="radio" name="q" id="common" value="rainbow butterflies">
      <label for="rainbow">Rainbow Butterflies</label>
    </div>
    <div class="item">
      <input type="radio" name="q" id="common" value="rainbow butterflies">
      <label for="brimstone">Brimstone</label>
    </div>
    <button type="submit">Find more about it!</button>
  </div>
</form>

Upvotes: 2

microb14
microb14

Reputation: 483

try with flex

.list {
display:flex;
align-items: center;
}

Upvotes: 0

Related Questions