How to center text below an image label?-CodePudding

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.imgur.com/43gQMb2.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 >&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>

CodePudding user response：

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.

CodePudding user response：

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