How to center a image next to an input field using flexbox
1
I am attempting to center a image next to an input field although when attempting to do so with vertical-align: bottom; nothing happens and my image is not centered where I want it to be.
I have tried to use position:relative and then move my image using top,bottom etc but I want to do it in a way that uses flexbox.
How would I go about doing this and what divs would I have to change to get the layout I want.
Layout I am trying to achieve:
Jsfiddle
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;
}
html css
asked Nov 18 '18 at 2:22
Jacques AndreJacques Andre
346
add a comment |
1
I am attempting to center a image next to an input field although when attempting to do so with vertical-align: bottom; nothing happens and my image is not centered where I want it to be.
I have tried to use position:relative and then move my image using top,bottom etc but I want to do it in a way that uses flexbox.
How would I go about doing this and what divs would I have to change to get the layout I want.
Layout I am trying to achieve:
Jsfiddle
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;
}
html css
asked Nov 18 '18 at 2:22
Jacques AndreJacques Andre
346
add a comment |
1
1
1
I am attempting to center a image next to an input field although when attempting to do so with vertical-align: bottom; nothing happens and my image is not centered where I want it to be.
I have tried to use position:relative and then move my image using top,bottom etc but I want to do it in a way that uses flexbox.
How would I go about doing this and what divs would I have to change to get the layout I want.
Layout I am trying to achieve:
Jsfiddle
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;
}
html css
asked Nov 18 '18 at 2:22
Jacques AndreJacques Andre
346
I am attempting to center a image next to an input field although when attempting to do so with vertical-align: bottom; nothing happens and my image is not centered where I want it to be.
I have tried to use position:relative and then move my image using top,bottom etc but I want to do it in a way that uses flexbox.
How would I go about doing this and what divs would I have to change to get the layout I want.
Layout I am trying to achieve:
Jsfiddle
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;
}
html css
html css
asked Nov 18 '18 at 2:22
Jacques AndreJacques Andre
346
asked Nov 18 '18 at 2:22
Jacques AndreJacques Andre
346
asked Nov 18 '18 at 2:22
Jacques AndreJacques Andre
346
asked Nov 18 '18 at 2:22
Jacques AndreJacques Andre
346
asked Nov 18 '18 at 2:22
Jacques AndreJacques Andre
346
346
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
3
You need to have the direct parent of the items that you want to have flex properties to have the display:flex property. So in your case it would be the .searchinput. So your .searchinput css should be the following:
.searchinput {
margin-top: 20px;
display:flex;
align-items: center;
}
So here is a snippet of the whole thing:
* {
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;
display:flex;
align-items: center;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}<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="https://i.imgur.com/dpkbGqu.png" alt="youtube" class="logos">
</div>
</div>answered Nov 18 '18 at 2:28
Steve KSteve K
4,2872716
Thanks although if I remove themargin-topand just havedisplay:flex; & align-items: center;there is a weird gap how do I fix this? i.imgur.com/LLSbF48.png
– Jacques Andre
Nov 18 '18 at 2:40
1
it looks like your image is taller than your input so flex box is taking in consideration the height of your image and centering the input and the image. if you inspect the image in chrome dev tools you can see that your image is 67px tall so your .searchinput that is containing the image is going to be 67px tall and yoiur input isn't this tall so flexbox is centering the two items and the white space you see is the extra height of the image. I hope that makes sense.
– Steve K
Nov 18 '18 at 2:50
Thank you makes sense now!
– Jacques Andre
Nov 18 '18 at 18:53
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53357347%2fhow-to-center-a-image-next-to-an-input-field-using-flexbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
You need to have the direct parent of the items that you want to have flex properties to have the display:flex property. So in your case it would be the .searchinput. So your .searchinput css should be the following:
.searchinput {
margin-top: 20px;
display:flex;
align-items: center;
}
So here is a snippet of the whole thing:
* {
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;
display:flex;
align-items: center;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}<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="https://i.imgur.com/dpkbGqu.png" alt="youtube" class="logos">
</div>
</div>answered Nov 18 '18 at 2:28
Steve KSteve K
4,2872716
Thanks although if I remove themargin-topand just havedisplay:flex; & align-items: center;there is a weird gap how do I fix this? i.imgur.com/LLSbF48.png
– Jacques Andre
Nov 18 '18 at 2:40
1
it looks like your image is taller than your input so flex box is taking in consideration the height of your image and centering the input and the image. if you inspect the image in chrome dev tools you can see that your image is 67px tall so your .searchinput that is containing the image is going to be 67px tall and yoiur input isn't this tall so flexbox is centering the two items and the white space you see is the extra height of the image. I hope that makes sense.
– Steve K
Nov 18 '18 at 2:50
Thank you makes sense now!
– Jacques Andre
Nov 18 '18 at 18:53
add a comment |
3
You need to have the direct parent of the items that you want to have flex properties to have the display:flex property. So in your case it would be the .searchinput. So your .searchinput css should be the following:
.searchinput {
margin-top: 20px;
display:flex;
align-items: center;
}
So here is a snippet of the whole thing:
* {
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;
display:flex;
align-items: center;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}<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="https://i.imgur.com/dpkbGqu.png" alt="youtube" class="logos">
</div>
</div>answered Nov 18 '18 at 2:28
Steve KSteve K
4,2872716
Thanks although if I remove themargin-topand just havedisplay:flex; & align-items: center;there is a weird gap how do I fix this? i.imgur.com/LLSbF48.png
– Jacques Andre
Nov 18 '18 at 2:40
1
it looks like your image is taller than your input so flex box is taking in consideration the height of your image and centering the input and the image. if you inspect the image in chrome dev tools you can see that your image is 67px tall so your .searchinput that is containing the image is going to be 67px tall and yoiur input isn't this tall so flexbox is centering the two items and the white space you see is the extra height of the image. I hope that makes sense.
– Steve K
Nov 18 '18 at 2:50
Thank you makes sense now!
– Jacques Andre
Nov 18 '18 at 18:53
add a comment |
3
3
3
You need to have the direct parent of the items that you want to have flex properties to have the display:flex property. So in your case it would be the .searchinput. So your .searchinput css should be the following:
.searchinput {
margin-top: 20px;
display:flex;
align-items: center;
}
So here is a snippet of the whole thing:
* {
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;
display:flex;
align-items: center;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}<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="https://i.imgur.com/dpkbGqu.png" alt="youtube" class="logos">
</div>
</div>answered Nov 18 '18 at 2:28
Steve KSteve K
4,2872716
You need to have the direct parent of the items that you want to have flex properties to have the display:flex property. So in your case it would be the .searchinput. So your .searchinput css should be the following:
.searchinput {
margin-top: 20px;
display:flex;
align-items: center;
}
So here is a snippet of the whole thing:
* {
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;
display:flex;
align-items: center;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}<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="https://i.imgur.com/dpkbGqu.png" alt="youtube" class="logos">
</div>
</div>* {
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;
display:flex;
align-items: center;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}<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="https://i.imgur.com/dpkbGqu.png" alt="youtube" class="logos">
</div>
</div>* {
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;
display:flex;
align-items: center;
}
input {
padding: 20px;
height: 30px;
background-color: transparent;
border: 2px solid black;
border-radius: 5px;
color: black;
font-size: 20px;
vertical-align: bottom;
}<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="https://i.imgur.com/dpkbGqu.png" alt="youtube" class="logos">
</div>
</div>answered Nov 18 '18 at 2:28
Steve KSteve K
4,2872716
edited Nov 18 '18 at 2:34
answered Nov 18 '18 at 2:28
Steve KSteve K
4,2872716
answered Nov 18 '18 at 2:28
Steve KSteve K
4,2872716
answered Nov 18 '18 at 2:28
Steve KSteve K
4,2872716
4,2872716
Thanks although if I remove themargin-topand just havedisplay:flex; & align-items: center;there is a weird gap how do I fix this? i.imgur.com/LLSbF48.png
– Jacques Andre
Nov 18 '18 at 2:40
1
it looks like your image is taller than your input so flex box is taking in consideration the height of your image and centering the input and the image. if you inspect the image in chrome dev tools you can see that your image is 67px tall so your .searchinput that is containing the image is going to be 67px tall and yoiur input isn't this tall so flexbox is centering the two items and the white space you see is the extra height of the image. I hope that makes sense.
– Steve K
Nov 18 '18 at 2:50
Thank you makes sense now!
– Jacques Andre
Nov 18 '18 at 18:53
add a comment |
Thanks although if I remove themargin-topand just havedisplay:flex; & align-items: center;there is a weird gap how do I fix this? i.imgur.com/LLSbF48.png
– Jacques Andre
Nov 18 '18 at 2:40
1
it looks like your image is taller than your input so flex box is taking in consideration the height of your image and centering the input and the image. if you inspect the image in chrome dev tools you can see that your image is 67px tall so your .searchinput that is containing the image is going to be 67px tall and yoiur input isn't this tall so flexbox is centering the two items and the white space you see is the extra height of the image. I hope that makes sense.
– Steve K
Nov 18 '18 at 2:50
Thank you makes sense now!
– Jacques Andre
Nov 18 '18 at 18:53
Thanks although if I remove the
margin-top and just have display:flex; & align-items: center; there is a weird gap how do I fix this? i.imgur.com/LLSbF48.png– Jacques Andre
Nov 18 '18 at 2:40
Thanks although if I remove the
margin-top and just have display:flex; & align-items: center; there is a weird gap how do I fix this? i.imgur.com/LLSbF48.png– Jacques Andre
Nov 18 '18 at 2:40
1
1
it looks like your image is taller than your input so flex box is taking in consideration the height of your image and centering the input and the image. if you inspect the image in chrome dev tools you can see that your image is 67px tall so your .searchinput that is containing the image is going to be 67px tall and yoiur input isn't this tall so flexbox is centering the two items and the white space you see is the extra height of the image. I hope that makes sense.
– Steve K
Nov 18 '18 at 2:50
it looks like your image is taller than your input so flex box is taking in consideration the height of your image and centering the input and the image. if you inspect the image in chrome dev tools you can see that your image is 67px tall so your .searchinput that is containing the image is going to be 67px tall and yoiur input isn't this tall so flexbox is centering the two items and the white space you see is the extra height of the image. I hope that makes sense.
– Steve K
Nov 18 '18 at 2:50
Thank you makes sense now!
– Jacques Andre
Nov 18 '18 at 18:53
Thank you makes sense now!
– Jacques Andre
Nov 18 '18 at 18:53
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53357347%2fhow-to-center-a-image-next-to-an-input-field-using-flexbox%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
