In redesigning a simple survey page I am facing a minor problem. Just like all the other elements, I want to centre-align p tag with select tag. I am able to centre align them, without display:flex inside .combobox class but I want them to be in the same line and still centre-align them.
My present layout is like this:
To summarise, I want to centre the Select and Combobox.
body {
text-align: center;
margin: auto;
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: rgb(56, 65, 77);
color: white;
padding: 3%;
font-size: 200%;
}
section {
color: rgb(56, 65, 77);
border-style: none;
}
.combobox {
display: flex;
flex: auto;
}
fieldset {
border: none;
}
footer {
background-color: rgb(56, 65, 77);
color: white;
padding: 1%;
position: absolute;
bottom: 0;
width: 100%;
}
select {
margin-top: 14px;
margin-left: 5px;
}
<header>SURVEY.COM</header>
<form method="POST">
<section>
<h1>Submit your Survey Today!</h1>
<p>Your Name</p>
<input type="text" id="name">
<p>Your Email</p>
<input type="text" id="email">
<div class="combobox">
<p>Select</p>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<fieldset>
<legend>What is Your Favorite Pet?</legend>
<input class="checkbox" type="checkbox" name="favorite_pet" value="Cats">Cats
<input class="checkbox" type="checkbox" name="favorite_pet" value="Dogs">Dogs
<input class="checkbox" type="checkbox" name="favorite_pet" value="Birds">Birds
</fieldset>
<input type="submit" value="Submit now" />
</section>
</form>
<footer>
Copyright © 2021
</footer>