Estoy intentando alinear una secuencia de inputs radios, pero no soy capaz. Una vez que pongo align center no salen alineados verticalmente los botones. Necesito que queden los inputs alineados en el centro y verticalmente, junto con el texto. Es para un formulario concreto.
¿Alguien me puede ayudar?
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 16px;
font-weight: 400;
height: 100%;
line-height: 28px;
vertical-align: baseline;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
color: #646464;
background-color: #ffffff;
}
.test {
width: 100%;
color: #5d5d5d;
font-size: 20px;
text-align: center;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
input[type='radio'],
label {
vertical-align: baseline;
padding: 10px;
margin: 10px;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Test</title>
</head>
<body>
<form method="post" name="prueba">
<section>
<div class="test" style="">
<input class="a" id="Yo no me he dado de alta" name="P6" type="radio" value="Yo no me he dado de alta" /><label class=""> Yo no me he dado de alta</label> <br>
<input class="inputradio" id="Un familiar está dado de alta" name="P6" type="radio" value="Un familiar está dado de alta" /><label class="motivos"> Un familiar está dado de alta</label> <br>
<input class="inputradio" id="Mi vecino me lo recomendó" name="P6" type="radio" value="Mi vecino me lo recomendó" /><label class="motivos"> Mi vecino me lo recomendó</label> <br>
<input class="inputradio" id="111" name="P6" type="radio" value="Otro motivo" /><label class="motivos"> Otro motivo</label>
</div>
</section>
</form>
</body>
</html>