CODEWITHSUNDEEP
htmlcss
Ken Deadmaus Mitchell
Ken Deadmaus Mitchell

Reputation: 44

How to center text below an image label?

So essentially I am attempting to get the label text to display under the label image, instead of to the right of it. But it appears as though when I try doing so via CSS, it breaks the layout of my page. I feel like I'm overthinking things haha! what am I doing incorrectly?

screenshot attached - https://i.sstatic.net/TU2IA.png

heres the CSS:

input[type=radio] {
    width: auto;
    display: block;
    line-height: normal;
    border: none;
label {
  padding-top: 6px;
  font-size: 13px;
  line-height: 18px;
  display: inline-block;
 display: inline-block;
  color: rgb(64, 64, 64);
}
<p>
    <input type="radio" name="ram" value="Corsair Vengeance LPX 16 GB (2 x 8 GB) DDR4-3200 Memory (+$0.00)" id="ram1-radio" onClick="Changeram(this.value);" checked >
    
<label for="ram1-radio"><img src="https://voidtechpcs.com/libs/images/layout/corsairvengeanceram.jpg" width="30%"> (+$0)</label>

<input type="radio" name="ram" value="Corsair Vengeance RGB Pro 16 GB (2 x 8 GB) DDR4-3200 Memory (+$0.00)" id="ram2-radio" onClick="Changeram(this.value);">

<label for="ram2-radio"><img src="https://voidtechpcs.com/libs/images/layout/corsairvengeancergb.jpg" width="30%">(+$0)</label>
<div class="clear">&nbsp;</div>
<input type="radio" name="ram" value="Corsair Vengeance LPX 32 GB (2 x 16 GB) DDR4-3600 Memory (+$0.00)" id="ram3-radio" onClick="Changeram(this.value);">

<label for="ram3-radio"><img src="https://voidtechpcs.com/libs/images/layout/corsairvengeanceram.jpg" width="30%">(+$0)</label>

<input type="radio" name="ram" value="Corsair Vengeance RGB Pro 32 GB (2 x 16 GB) DDR4-3600 Memory (+$0.00)" id="ram4-radio" onClick="Changeram(this.value);">

<label for="ram4-radio"><img src="https://voidtechpcs.com/libs/images/layout/corsairvengeancergb.jpg" width="30%">(+$0)</label>

</p>

Using these CSS styles as you said worked flawlessly i made a stylelabel class to wrap it together just as you also said. The images and radio boxes now display correctly, and are now 2x2 display :D

.stylelabel label {
    padding-top: 6px;
    font-size: 13px;
    line-height: 18px;
    display: inline-block;
    width: 200px;
    text-align: center;
    color: rgb(64, 64, 64);
}
.stylelabel label img {
    border: none;
    width: 50%;
}

Upvotes: 1

Views: 791

Answers (2)

Nasim Ahmed
Nasim Ahmed

Reputation: 13

Remove display: inline-block from the label but if that does not work try put the input and label into one div then in the css target the div and give it

display: flex
flex-direction: column

Upvotes: 0

Fabien Aur&#233;jac
Fabien Aur&#233;jac

Reputation: 197

Put a <br /> between image and text, use also text-align:center; in the label selector, keeping inline-block display but not twice, it's useless.

Upvotes: 2

Related Questions