mi pregunta es la siguiente, cuento con 2 select en html y un boton conjunto, les he estado dando forma con css y quedan bien pero al momento de cambiar el tamaño del navegador los titulos de los select y el boton no quedan alienados, solo he podido centrarlos con text-aling:center pero al cambiar la resolucion se mueven, estoy buscando algo asi:
---------------------------------------
Select: "CAJA" Select: "CAJA" Boton
---------------------------------------
#busqueda {
text-align:center;
margin-top:15px;
width:100%;
height:auto;
display:inline-block;
}
select {
background: #E8EBF7;
border: none;
font-size: 15px;
height:30px;
padding:5px;
}
#select1 {
margin-left:5px;
}
#select2 {
margin-left:5px;
}
#boton1 {
border: none;
background: #BF68F5;
color: #f2f2f2;
padding: 10px;
margin-left:5px;
font-size: 15px;
border-radius: 10px;
position: relative;
box-sizing: border-box;
transition: all 500ms ease;
}
<div id="busqueda">
Estado:
<select name="estados" id="select1">
<option value="0">Todo México</option>
<option value="1">Aguascalientes</option>
</select>
Categoria:
<select name="categorias" id="select2">
<option value="0">Todas las Categorias</option>
<option value="1">Vestidos</option>
</select>
<input type="submit" value="Buscar" name="buscar" id="boton1">
</div>