我的问题是：

如何将列表置于默认值的中心？我的掠夺者并不完整，因为我的真实情况就像在这里发现的那样 http://www.cliptheme.com/demo/clip-two/AngularJs-Admin/STANDARD/#/app/form/wizard

转到表单 / 表单向导 / 第3步比尔

如您所见，通过选择一年，然后再次点击它，菜单将以所选年份为中心。

但我的问题是，当我将默认年份值传递给它时，好像我已经选择了，然后我单击列表中的列表，我应该看到它以该默认值为中心，但事实并非如此。一旦我在那一年再次点击，再次点击列表，我看到它居中。

换句话说，将一年作为默认值传递的方式与我第一次点击时没有相同的作用，因为当我再次重新点击时，它不会居中。我们如何解决这个问题？

以下是我正在使用的选择器的CSS文件：css link ，这不包含在plunker或代码段中，因为我无法正确地重现该CSS如果可以的话，你可以这样做。

var app = angular.module('app', []);

app.controller('MyCtrl', function($scope) {
    $scope.dates = {};
    $scope.years = [{value: 'Year', disabled: true}];
    var current_year = new Date().getFullYear();
    for(var i = current_year - 20; i <= current_year + 20; i++){
        $scope.years.push({value: i + ''});
    }
    var d = new Date();
    var n = d.getFullYear();

    $scope.dates.startYear = n;

});

   <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
   <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>

<body ng-app="app">
 <div ng-controller="MyCtrl">

        <label class="control-label">Year</label>
  <select name="startYear" ng-model="dates.startYear" id="startYear"
          ng-options="year.value as year.value disable when year.disabled for year in years"
          required>
      <option value="" disabled >Choose one</option>
  </select>
</div>
</body>

更新1：

以下是处理此特定元素的指令：

https://pastebin.com/0diFfH6t

更新2：

即使在Dekel的解决方案之后，这里的插件也能准确显示问题。 https://plnkr.co/edit/aWbZkp4xitvBcMmhHadI?p=preview

如您所见，在页面加载时，点击下拉菜单时，它不会以默认值为中心。

Answer 1

首先我要说<select>标签不是标准标签，因为该标签的渲染部分是由操作系统而不是浏览器完成的，所以它的行为与其他元素略有不同，而你无法将css真正应用于您需要的所有内容。

话虽如此 - 有（几乎）总是可以做的黑客攻击，我将把这个例子展示为黑客之一：

＆＃13;

function selectfocus() {
    el = event.target;
    sizeWhenOpen = 5;
    el.size=sizeWhenOpen;
    totalHeight = el.getBoundingClientRect().height;
    heightPerOption = el.scrollHeight/el.options.length;
    currentIndex = el.selectedIndex;
    el.scrollTop = heightPerOption * (currentIndex - Math.floor(sizeWhenOpen/2));
}

＆＃13;

<select 
  onfocus="selectfocus()"
  onblur="this.size=1;"
  onchange="this.size=1; this.blur();">
    <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>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
</select>

＆＃13;

由于我们无法控制<select>打开时显示的元素数量，因此我使用了两种状态 - 一种是关闭时（大小= 0）而一种是打开时（大小= 5）在示例中）。当选择打开时 - 我使用当前选择的选项（基于索引）并将选择滚动到相关位置确保它居中。

另一个重要注意事项 - 在您的应用程序中，您可能需要使用css来定位（绝对/相对）select / it容器以保持原始大小（打开时的大小大于关闭时的大小））。

这是角度版本，基于你的plunkr：
https://plnkr.co/edit/eV1sPxENpcO1xXcS6JL3?p=preview

最后注意事项 - 如果您需要网站中<select>标记中的确切内容 - 请使用基于常规html元素的下拉列表实现，而不是选择：）

Answer 2

为什么不写一些CSS来定位span标签？

span { text-align: center; }

或更好....将其标记为id或类

.className { text-align: center; }
#idName { text-align: center; }

下面是一个功能性的plunker。

Plunker Example

Answer 3

参考您的Update 2 plunk链接，您只需要更新CSS。指定您必须放置选择框的区域的宽度（您想要的任何宽度）。这肯定会解决你的问题:)

.myctrl {
    position: absolute;
    vertical-align: top;
    margin-left: 50px;
    width: 200px;
}

Answer 4

事情是你在cliptheme.com上的例子根本不滚动。它只是保持居中，因为div保持滚动位置。

因此，要解决您的问题，您只需计算正确的位置并将其设置为.cs-options div。可以使用的一个事件是_toggleSelect。

工作示例（见370-372行）：

https://plnkr.co/edit/XgoeU8igSSeu044EFBCV

这只是一个提示，你的最终解决方案应该更复杂（比如每次打开列表时都不查询元素）。

Answer 5

您可以将样式应用于选择框的ID，如下所示

<!DOCTYPE html>
<html ng-app="app">

<head>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<style>
#startYear{
  padding:0 1% 0 10%;
}
</style>
<body>
  <div ng-controller="MyCtrl">


      <label class="control-label">Year</label>
      <select name="startYear" ng-model="dates.startYear" id="startYear"
              ng-options="year.value as year.value disable when year.disabled for year in years"
              required>
          <option value="" disabled >Choose one</option>
      </select>

  </div>
</body>

</html>

选择下拉菜单中的css中心默认值

我的问题是：

更新1：

更新2：

5 个答案: