How to center align a drop down list

Question

I would like to be able to center align my drop-down list to match the buttons which are center aligned. Any ideas how I could do this using .css?

<h4 id="carbCount" class="pageElement">The Carb Count is 0</h4><br />
<div class="pageElement">
  <select id="foodList">
    <option value="100">Potatoes (100)</option>
    <option value="15">Bagel (15)</option>
    <option value="7.5">Oats (7.5)</option>
    <option value="45">Baguette (45)</option>
  </select>
</div>

hello dear, default select dropdown has no apply center aligned CSS properties and you must use the custom select dropdown. — HAPPY SINGH, May 14 '19 at 08:28
Its looks like the same here https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box, It may duplicate question. — Sathish Chelladurai, May 14 '19 at 14:23

Rachel Gallen · Answer 1 · 2019-05-14T14:07:31.313

1

Without seeing the rest of your code, it's hard to say if the select will be in alignment with your other buttons. However there are generally two ways of center-aligning : using margin:0 auto; or using text-align:center; . For these purposes, I have used the text-align:center;. I centered both the header and the list. If you only want to center the list, use the list id, foodList, to apply the text-align.

EDIT: if you are using display:flex; you can use

.pageElement{
   align-items: center;
   justify-content: center;
}

to center. This will also work.

Hope this helps.

.pageElement{text-align:center;}

<h4 id="carbCount" class="pageElement">The Carb Count is 0</h4><br />
    <div class="pageElement">
        <select id="foodList">
            <option value="100">Potatoes (100)</option>
            <option value="15">Bagel (15)</option>
            <option value="7.5">Oats (7.5)</option>
            <option value="45">Baguette (45)</option>
        </select>
  </div>

edited May 14 '19 at 14:07

answered May 14 '19 at 14:02

Rachel Gallen

27,943
21
72
81

i think he/she wants to center the elements in the dropdown... wich is not possible (because it's done by the OS) – DigitalJedi May 14 '19 at 14:10
@DigitalJedi I misunderstood the question then. It says OP wants to center-align the list, not the list elements. – Rachel Gallen May 14 '19 at 14:11
1

Well, its not quite clear...now ive given the other answers. Im not going to downvote because well... your answer is correct (we just dont know what he/she wants) – DigitalJedi May 14 '19 at 14:16

DigitalJedi · Answer 2 · 2019-05-14T14:46:58.747

Like you can see in @RachelGallen's answer you can center your whole dropdown like She did.

If you want to center the elements inside your dropdown you will need to use a custom dropdown approach. (Because the standard dropdown is done by the Operating System and you cannot align text inside it (as far as i know)

Here would be a quick custom approach: (EDIT: with snippet)

.dropdown {
  text-align: center;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 10px 15px;
  z-index: 1;
  min-width: 100%;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content p {
  text-align: center;
}

<body>

<h2>Hoverable Centered Dropdown</h2>
<p>Move the mouse over the text to open dropdown content.</p>

<div class="dropdown">
  <p>Mouse over me</p>
  <div class="dropdown-content">
  <p>Hello World!</p>
  <p>Another One!</p>
  </div>
</div>

</body>

Yes, as yet, centering select options is not straightforward using css. (you could add a snippet to your answer? ) +1 from me :) — Rachel Gallen, May 14 '19 at 14:23
@RachelGallen I have added a snippet now. Thx for pointing it out — DigitalJedi, May 14 '19 at 14:48

score 0 · Answer 3 · answered May 14 '19 at 14:16

You can align the entire content to center

body{
  text-align:center
}

<h4 id="carbCount" class="pageElement">The Carb Count is 0</h4><br />
    <div class="pageElement">
        <select id="foodList">
            <option value="100">Potatoes (100)</option>
            <option value="15">Bagel (15)</option>
            <option value="7.5">Oats (7.5)</option>
            <option value="45">Baguette (45)</option>
        </select>
  </div>

https://jsfiddle.net/axq2oen7/

How to center align a drop down list

3 Answers3