Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to center text in select box?

Tags:

css

People also ask

How do I center align text in Dropdownlist?

Dropdown button can be positioned in the center of the page by setting the “text-align” property of dropdown div to center. The following example contains a simple Bootstrap dropdown menu with an added class “my-menu”. The property “text-align: center” is added to the class.

How do I center text in a box?

Right-click the text box for which you want to set vertical alignment. On the shortcut menu, click Format Text Box. In the Format Text Box dialog box, click the Text Box tab. In the Vertical alignment box, select Top, Middle, or Bottom.

How do I center text in a list item?

To center the text just add text-align: center to ul or li .


There is a partial solution for Chrome:

select { width: 400px; text-align-last:center; }

It does center the selected option, but not the options inside the dropdown.


That's for align right. Try it:

select{
    text-align-last:right;
    padding-right: 29px;
    direction: rtl;
}

the browser support for the text-align-last attribute can be found here: https://www.w3schools.com/cssref/css3_pr_text-align-last.asp It looks like only Safari is still not supporting it.


You have to put the CSS rule into the select class.

Use CSS text-indent

Example

<select class="day"> /* option 1 option 2 option 3 option 4 option 5 here */ </select>

CSS code

select { text-indent: 5px; }

Yes, it is possible. You can use text-align-last

text-align-last: center;