HTML CSS how to center select in other column

Question

I have the following select in a row of stuff that I'd like to better align/space out onto the right side:

I.e. the select next to "License Quantity". I would like to move the number more on the right, as would look more visually appropriate.

Code below:

<div class="field-group">

  <div style="text-align: center;" class="field field--with-dropdown clearfix">
    <label for="field-qty">License Quantity</label>
    <select style="text-align: center; margin-left: 25em" id="field-qty-num" onchange="qty_change()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
    </select>

  </div>

  <div class="field">
    <label for="field-phone">User Training Manual</label>
    <input id="field-phone" type="text" class="form-control" style="text-align: center;" placeholder="Included for free!" readonly />
  </div>

  <div class="field">
    <label for="field-phone">User Training Videos</label>
    <input id="field-phone" type="text" class="form-control" style="text-align: center;" placeholder="Included for free!" readonly />
  </div>

  <div class="field">
    <label for="field-phone">6 Months Tech Support</label>
    <input id="field-phone" type="text" style="text-align: center;" class="form-control" placeholder="Included for free!" readonly />
  </div>

</div>

Possible duplicate of [Is it possible to center text in select box?](https://stackoverflow.com/questions/10813528/is-it-possible-to-center-text-in-select-box) — Heretic Monkey, Jul 10 '18 at 21:27
You might want to use `margin: 0px auto;` rather than `margin-left:25em;`. Though your code snippet doens't work like it does on the picture. — Webber, Jul 10 '18 at 21:29
Provide all the relevant CSS. You have not included whatever is causing this. Appears to me that you've set a width on the input which should be changed. — EternalHour, Jul 10 '18 at 21:44

Jismon Thomas · Answer 1 · 2018-07-10T21:59:14.660

Is this what you are looking for ?

The key is text-align-last:right;, that brings the select items to the right side

label {
  display: inline-block;
  min-width: 200px;
  background:#DDD;
}

.itemRight {
  min-width: 200px;
}

select {
   text-align-last:right;
}

#field-qty-num, option {
  width: 204px;
  text-align: center;
}

<div class="field-group">

  <div style="" class="field field--with-dropdown clearfix">
    <label for="field-qty">License Quantity</label>
    <select style="" class="itemRight" id="field-qty-num" onchange="qty_change()">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
    </select>

  </div>

  <div class="field">
    <label for="field-phone">User Training Manual</label>
    <input id="field-phone" type="text" class="itemRight form-control" style="text-align: center;" placeholder="Included for free!" readonly />
  </div>

  <div class="field">
    <label for="field-phone">User Training Videos</label>
    <input id="field-phone" type="text" class="itemRight form-control" style="text-align: center;" placeholder="Included for free!" readonly />
  </div>

  <div class="field">
    <label for="field-phone">6 Months Tech Support</label>
    <input id="field-phone" type="text" style="text-align: center;" class="itemRight form-control" placeholder="Included for free!" readonly />
  </div>
</div>

score 0 · Answer 2 · answered Jul 10 '18 at 21:35

0

Without hardcoding a specific width, you could go for a flexbox approach:

<div style="display:flex;justify-content:space-between;/*or space-evenly*/" class="field field--with-dropdown clearfix"> 
<label for="field-qty">License Quantity</label>
 <select id="field-qty-num" onchange="qty_change()"> 
<option>1</option> 
<option>2</option> 
<option>3</option> 
<option>4</option> 
<option>5</option>
<option>6</option> 
<option>7</option>
<option>8</option>
<option>9</option>
</select> </div>

answered Jul 10 '18 at 21:35

DKyleo

806
8
11

Sorry but this didn't make any difference, I got the same output – JDS Jul 10 '18 at 21:37
Does your select tag have a set width in place from your css? – DKyleo Jul 10 '18 at 21:40

HTML CSS how to center select in other column

2 Answers2