Having some trouble while redesigning a simple survey page. I want to center-align the p tag with the select tag without using display:flex inside the .combobox class. The goal is to have them on the same line and still be centered.
The current layout looks like this: https://i.stack.imgur.com/FVI1V.png
In summary, I need to align the Select and Combobox elements in the center.
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>