I'm struggling to center an image next to an input field. Even when I try using vertical-align: bottom;, the image doesn't end up centered where I want it to be.
I attempted to use position:relative and adjust my image using top, bottom, etc., but I'd prefer to accomplish this using flexbox.
How can I achieve this layout and what changes should I make to the divs?
Here is the layout I'm aiming for.
Check out my Jsfiddle for reference.
HTML
<div class="container">
<h1>Inputs</h1>
<p class="spacing">multiple inputs...</p>
<div class="searchinput">
<input type="text" name="search" id="google-input" placeholder="Google search...">
<img src="logos/google.png" alt="youtube" class="logos">
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.logos{
width: 90px;
vertical-align: bottom;
}
.container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 90vh;
}
.searchinput {
margin-top: 20px;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}