Vertical centering of text of select-element

I've created a small codepen to test how to align span,div, input and select elements evenly inside a container. After alot of trial and error it's working across Chrome, Firefox and Edge.

https://codepen.io/anon/pen/QJQaVX

But the problem now is the select-box. The text which shows the actual selection is moved to bottom-line of the inner text. This is also visible in the inspector. Surprisingly Edge is showing the expected behaviour and centers the text. But Chrome and Firefox won't.
I've tried setting line-height without success. Even display:flex is not changing anything.

Is there any proper solution for this problem?

asked Nov 22 '18 at 0:22

Auskennfuchs

1338

Probably because you have given a height to the option. I tried to remove it and it does center.

– Gurtej Singh
Nov 22 '18 at 0:26

Correct, it looks like your height option is cause problems. I'd recommend removing the Option out of the CSS rule which gives it a height.

– Robert Perez
Nov 22 '18 at 0:29

Unfortunately not for me. I've removed option from the selector and still get the same result.

– Auskennfuchs
Nov 22 '18 at 0:31

add a comment |

I've created a small codepen to test how to align span,div, input and select elements evenly inside a container. After alot of trial and error it's working across Chrome, Firefox and Edge.

https://codepen.io/anon/pen/QJQaVX

Is there any proper solution for this problem?

asked Nov 22 '18 at 0:22

Auskennfuchs

1338

Probably because you have given a height to the option. I tried to remove it and it does center.

– Gurtej Singh
Nov 22 '18 at 0:26

Correct, it looks like your height option is cause problems. I'd recommend removing the Option out of the CSS rule which gives it a height.

– Robert Perez
Nov 22 '18 at 0:29

Unfortunately not for me. I've removed option from the selector and still get the same result.

– Auskennfuchs
Nov 22 '18 at 0:31

add a comment |

I've created a small codepen to test how to align span,div, input and select elements evenly inside a container. After alot of trial and error it's working across Chrome, Firefox and Edge.

https://codepen.io/anon/pen/QJQaVX

Is there any proper solution for this problem?

asked Nov 22 '18 at 0:22

Auskennfuchs

1338

I've created a small codepen to test how to align span,div, input and select elements evenly inside a container. After alot of trial and error it's working across Chrome, Firefox and Edge.

https://codepen.io/anon/pen/QJQaVX

Is there any proper solution for this problem?

css microsoft-edge

asked Nov 22 '18 at 0:22

Auskennfuchs

1338

asked Nov 22 '18 at 0:22

Auskennfuchs

1338

asked Nov 22 '18 at 0:22

Auskennfuchs

1338

asked Nov 22 '18 at 0:22

Auskennfuchs

1338

asked Nov 22 '18 at 0:22

Auskennfuchs

1338

Probably because you have given a height to the option. I tried to remove it and it does center.

– Gurtej Singh
Nov 22 '18 at 0:26

Correct, it looks like your height option is cause problems. I'd recommend removing the Option out of the CSS rule which gives it a height.

– Robert Perez
Nov 22 '18 at 0:29

Unfortunately not for me. I've removed option from the selector and still get the same result.

– Auskennfuchs
Nov 22 '18 at 0:31

add a comment |

Probably because you have given a height to the option. I tried to remove it and it does center.

– Gurtej Singh
Nov 22 '18 at 0:26

Correct, it looks like your height option is cause problems. I'd recommend removing the Option out of the CSS rule which gives it a height.

– Robert Perez
Nov 22 '18 at 0:29

Unfortunately not for me. I've removed option from the selector and still get the same result.

– Auskennfuchs
Nov 22 '18 at 0:31

Probably because you have given a height to the option. I tried to remove it and it does center.

– Gurtej Singh
Nov 22 '18 at 0:26

Correct, it looks like your height option is cause problems. I'd recommend removing the Option out of the CSS rule which gives it a height.

– Robert Perez
Nov 22 '18 at 0:29

Unfortunately not for me. I've removed option from the selector and still get the same result.

– Auskennfuchs
Nov 22 '18 at 0:31

add a comment |

2 Answers
2

active

oldest

votes

I have updated the code for you and play with the padding & content box. this will work across all the browser.

Check out this codepen

<div id="container1">

    <input id="textbox" type="text" value="Test" />

    <span>TestText</span>

    <div>TestText</div>

    <select id="dropdown">

        <option>Test</option>

    </select>

</div>





#container1 input[type="text"], 

#container1 select, 

#container1 span, 

#container1 div {

    padding: 1em;

    border: 1px solid #ccc;

    line-height: 16px;

    height: 16px;

    font-size: 14px;

    -moz-box-sizing: content-box;

    -webkit-box-sizing: content-box;

    box-sizing: content-box;

    display: inline-block;

    margin: 10px 10px 0px 20px;

}

edited Nov 22 '18 at 9:03

Yoram de Langen

3,90511727

answered Nov 22 '18 at 7:44

Sumit Patel

2346

Thank you for your solution. This is working but I have one issue with it. The positioning inside the container is only working with margin. When I change to margin to 0 and use padding of the container again, the select box is moved up slightly. codepen.io/anon/pen/KrQjWZ I don't get why this has to be so difficult or why the form-controls behave differently than any other element :-(

– Auskennfuchs
Nov 22 '18 at 10:11

1

This issue can resolve with using flex property and also we have to use px for line height and height. Check out this codepen

– Sumit Patel
Nov 22 '18 at 12:17

add a comment |

I've tested your code and found that the font-family: inherit in input, select, textarea is extra.

Inherits this property from its parent element. The inherit keyword specifies that a property should inherit its value from its parent element.

From: https://www.w3schools.com/cssref/pr_font_font-family.asp

Your input, select,div are already in the container class, the font-family is inherited by default.

You could modfiy your code as follow.

HTML.

 <div class="container">

   <input type="text" value="TestText">

   <span>TestText</span>

   <div>TestText</div>

   <select>

     <option>Test</option>

   </select>

 </div>

CSS.

input, select, span, div { 

line-height: 1.15em;

height: 1.15em;

box-sizing: content-box;

}

Result

answered Nov 23 '18 at 8:01

Jenifer Jiang

1014

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');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422259%2fvertical-centering-of-text-of-select-element%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

I have updated the code for you and play with the padding & content box. this will work across all the browser.

Check out this codepen

<div id="container1">

    <input id="textbox" type="text" value="Test" />

    <span>TestText</span>

    <div>TestText</div>

    <select id="dropdown">

        <option>Test</option>

    </select>

</div>





#container1 input[type="text"], 

#container1 select, 

#container1 span, 

#container1 div {

    padding: 1em;

    border: 1px solid #ccc;

    line-height: 16px;

    height: 16px;

    font-size: 14px;

    -moz-box-sizing: content-box;

    -webkit-box-sizing: content-box;

    box-sizing: content-box;

    display: inline-block;

    margin: 10px 10px 0px 20px;

}

edited Nov 22 '18 at 9:03

Yoram de Langen

3,90511727

answered Nov 22 '18 at 7:44

Sumit Patel

2346

Thank you for your solution. This is working but I have one issue with it. The positioning inside the container is only working with margin. When I change to margin to 0 and use padding of the container again, the select box is moved up slightly. codepen.io/anon/pen/KrQjWZ I don't get why this has to be so difficult or why the form-controls behave differently than any other element :-(

– Auskennfuchs
Nov 22 '18 at 10:11

1

This issue can resolve with using flex property and also we have to use px for line height and height. Check out this codepen

– Sumit Patel
Nov 22 '18 at 12:17

add a comment |

I have updated the code for you and play with the padding & content box. this will work across all the browser.

Check out this codepen

<div id="container1">

    <input id="textbox" type="text" value="Test" />

    <span>TestText</span>

    <div>TestText</div>

    <select id="dropdown">

        <option>Test</option>

    </select>

</div>





#container1 input[type="text"], 

#container1 select, 

#container1 span, 

#container1 div {

    padding: 1em;

    border: 1px solid #ccc;

    line-height: 16px;

    height: 16px;

    font-size: 14px;

    -moz-box-sizing: content-box;

    -webkit-box-sizing: content-box;

    box-sizing: content-box;

    display: inline-block;

    margin: 10px 10px 0px 20px;

}

edited Nov 22 '18 at 9:03

Yoram de Langen

3,90511727

answered Nov 22 '18 at 7:44

Sumit Patel

2346

Thank you for your solution. This is working but I have one issue with it. The positioning inside the container is only working with margin. When I change to margin to 0 and use padding of the container again, the select box is moved up slightly. codepen.io/anon/pen/KrQjWZ I don't get why this has to be so difficult or why the form-controls behave differently than any other element :-(

– Auskennfuchs
Nov 22 '18 at 10:11

1

This issue can resolve with using flex property and also we have to use px for line height and height. Check out this codepen

– Sumit Patel
Nov 22 '18 at 12:17

add a comment |

I have updated the code for you and play with the padding & content box. this will work across all the browser.

Check out this codepen

<div id="container1">

    <input id="textbox" type="text" value="Test" />

    <span>TestText</span>

    <div>TestText</div>

    <select id="dropdown">

        <option>Test</option>

    </select>

</div>





#container1 input[type="text"], 

#container1 select, 

#container1 span, 

#container1 div {

    padding: 1em;

    border: 1px solid #ccc;

    line-height: 16px;

    height: 16px;

    font-size: 14px;

    -moz-box-sizing: content-box;

    -webkit-box-sizing: content-box;

    box-sizing: content-box;

    display: inline-block;

    margin: 10px 10px 0px 20px;

}

edited Nov 22 '18 at 9:03

Yoram de Langen

3,90511727

answered Nov 22 '18 at 7:44

Sumit Patel

2346

I have updated the code for you and play with the padding & content box. this will work across all the browser.

Check out this codepen

<div id="container1">

    <input id="textbox" type="text" value="Test" />

    <span>TestText</span>

    <div>TestText</div>

    <select id="dropdown">

        <option>Test</option>

    </select>

</div>





#container1 input[type="text"], 

#container1 select, 

#container1 span, 

#container1 div {

    padding: 1em;

    border: 1px solid #ccc;

    line-height: 16px;

    height: 16px;

    font-size: 14px;

    -moz-box-sizing: content-box;

    -webkit-box-sizing: content-box;

    box-sizing: content-box;

    display: inline-block;

    margin: 10px 10px 0px 20px;

}

edited Nov 22 '18 at 9:03

Yoram de Langen

3,90511727

answered Nov 22 '18 at 7:44

Sumit Patel

2346

edited Nov 22 '18 at 9:03

Yoram de Langen

3,90511727

edited Nov 22 '18 at 9:03

Yoram de Langen

3,90511727

edited Nov 22 '18 at 9:03

Yoram de Langen

3,90511727

answered Nov 22 '18 at 7:44

Sumit Patel

2346

answered Nov 22 '18 at 7:44

Sumit Patel

2346

answered Nov 22 '18 at 7:44

Sumit Patel

2346

Thank you for your solution. This is working but I have one issue with it. The positioning inside the container is only working with margin. When I change to margin to 0 and use padding of the container again, the select box is moved up slightly. codepen.io/anon/pen/KrQjWZ I don't get why this has to be so difficult or why the form-controls behave differently than any other element :-(

– Auskennfuchs
Nov 22 '18 at 10:11

1

This issue can resolve with using flex property and also we have to use px for line height and height. Check out this codepen

– Sumit Patel
Nov 22 '18 at 12:17

add a comment |

Thank you for your solution. This is working but I have one issue with it. The positioning inside the container is only working with margin. When I change to margin to 0 and use padding of the container again, the select box is moved up slightly. codepen.io/anon/pen/KrQjWZ I don't get why this has to be so difficult or why the form-controls behave differently than any other element :-(

– Auskennfuchs
Nov 22 '18 at 10:11

1

This issue can resolve with using flex property and also we have to use px for line height and height. Check out this codepen

– Sumit Patel
Nov 22 '18 at 12:17

Thank you for your solution. This is working but I have one issue with it. The positioning inside the container is only working with margin. When I change to margin to 0 and use padding of the container again, the select box is moved up slightly. codepen.io/anon/pen/KrQjWZ I don't get why this has to be so difficult or why the form-controls behave differently than any other element :-(

– Auskennfuchs
Nov 22 '18 at 10:11

This issue can resolve with using flex property and also we have to use px for line height and height. Check out this codepen

– Sumit Patel
Nov 22 '18 at 12:17

add a comment |

I've tested your code and found that the font-family: inherit in input, select, textarea is extra.

Inherits this property from its parent element. The inherit keyword specifies that a property should inherit its value from its parent element.

From: https://www.w3schools.com/cssref/pr_font_font-family.asp

Your input, select,div are already in the container class, the font-family is inherited by default.

You could modfiy your code as follow.

HTML.

 <div class="container">

   <input type="text" value="TestText">

   <span>TestText</span>

   <div>TestText</div>

   <select>

     <option>Test</option>

   </select>

 </div>

CSS.

input, select, span, div { 

line-height: 1.15em;

height: 1.15em;

box-sizing: content-box;

}

Result

answered Nov 23 '18 at 8:01

Jenifer Jiang

1014

add a comment |

I've tested your code and found that the font-family: inherit in input, select, textarea is extra.

Inherits this property from its parent element. The inherit keyword specifies that a property should inherit its value from its parent element.

From: https://www.w3schools.com/cssref/pr_font_font-family.asp

Your input, select,div are already in the container class, the font-family is inherited by default.

You could modfiy your code as follow.

HTML.

 <div class="container">

   <input type="text" value="TestText">

   <span>TestText</span>

   <div>TestText</div>

   <select>

     <option>Test</option>

   </select>

 </div>

CSS.

input, select, span, div { 

line-height: 1.15em;

height: 1.15em;

box-sizing: content-box;

}

Result

answered Nov 23 '18 at 8:01

Jenifer Jiang

1014

add a comment |

I've tested your code and found that the font-family: inherit in input, select, textarea is extra.

Inherits this property from its parent element. The inherit keyword specifies that a property should inherit its value from its parent element.

From: https://www.w3schools.com/cssref/pr_font_font-family.asp

Your input, select,div are already in the container class, the font-family is inherited by default.

You could modfiy your code as follow.

HTML.

 <div class="container">

   <input type="text" value="TestText">

   <span>TestText</span>

   <div>TestText</div>

   <select>

     <option>Test</option>

   </select>

 </div>

CSS.

input, select, span, div { 

line-height: 1.15em;

height: 1.15em;

box-sizing: content-box;

}

Result

answered Nov 23 '18 at 8:01

Jenifer Jiang

1014

I've tested your code and found that the font-family: inherit in input, select, textarea is extra.

Inherits this property from its parent element. The inherit keyword specifies that a property should inherit its value from its parent element.

From: https://www.w3schools.com/cssref/pr_font_font-family.asp

Your input, select,div are already in the container class, the font-family is inherited by default.

You could modfiy your code as follow.

HTML.

 <div class="container">

   <input type="text" value="TestText">

   <span>TestText</span>

   <div>TestText</div>

   <select>

     <option>Test</option>

   </select>

 </div>

CSS.

input, select, span, div { 

line-height: 1.15em;

height: 1.15em;

box-sizing: content-box;

}

Result

answered Nov 23 '18 at 8:01

Jenifer Jiang

1014

answered Nov 23 '18 at 8:01

Jenifer Jiang

1014

answered Nov 23 '18 at 8:01

Jenifer Jiang

1014

answered Nov 23 '18 at 8:01

Jenifer Jiang

1014

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk