在 ios7 上的选择中居中文本答案

【问题标题】：center text in select on ios7在 ios7 上的选择中居中文本
【发布时间】：2016-03-28 17:31:55
【问题描述】：

此代码适用于 ios6（文本在选择框中居中对齐）。但是在ios7中它是左对齐的吗？

select {
    text-align: -webkit-center;
}

有谁知道如何解决这个问题，以便在 ios7 上的选择中将文本居中？

谢谢

【问题讨论】：

您是否尝试过没有-webkit 供应商的text-align:center。好像不支持。
是的，在 ios7 和 ios6 上都不起作用。文本对齐：-webkit 中心；虽然在 6 中工作

标签： html select ios7 center

【解决方案1】：

您可以在 angularjs 上使用此技巧或使用 js 将所选值与 div 上的文本进行映射，此解决方案在 angular 上完全符合 css 标准，但需要在 select 和 div 之间进行映射：

var myApp = angular.module('myApp', []);

myApp.controller('selectCtrl', ['$scope',
  function($scope) {
    $scope.value = ''; 
}]);

.ghostSelect {
  opacity: 0.1;
  /* Should be 0 to avoid the select visibility but not visibility:hidden*/
  display: block;
  width: 200px;
  position: absolute;
}
.select {
  border: 1px solid black;
  height: 20px;
  width: 200px;
  text-align: center;
  border-radius: 5px;
  display: block;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Example - example-guide-concepts-1-production</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-app ng-controller="selectCtrl">
    <div class=select>
      <select ng-model="value" class="ghostSelect">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
      </select>
      <div>{{value}}
      </div>
    </div>
  </div>
</body>

希望这对某人有用，因为我花了一天时间在 phonegap 上找到这个解决方案。

【讨论】：