发表新帖
发表新帖

Is it possible to center text in select box?

后端 未结
关注
19 2401
一整个雨季
一整个雨季 2020-11-22 11:21

I tried this: http://jsfiddle.net/ilyaD/KGcC3/

HTML:
提交评论
  •  加载中...
  • [愿得一人]
    2020-11-22 12:00

    If you didn't find any solution, you can use this trick on angularjs or using js to map selected value with a text on the div, this solution is full css compliant on angular but need a mapping between select and 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>

    Hope this could be useful for someone as it took me one day to find this solution on phonegap.

    0 讨论(0)
  • 既然无缘
    2020-11-22 12:01

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

    text-align-last: center;
    0 讨论(0)
  • 青春惊慌失措
    2020-11-22 12:02

    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.

    0 讨论(0)
  • 轻奢々
    2020-11-22 12:02

    This JS function should work for you

    function getTextWidth(txt) {
  var $elm = $('<span class="tempforSize">'+txt+'</span>').prependTo("body");
  var elmWidth = $elm.width();
  $elm.remove();
  return elmWidth;
}
function centerSelect($elm) {
    var optionWidth = getTextWidth($elm.children(":selected").html())
    var emptySpace =   $elm.width()- optionWidth;
    $elm.css("text-indent", (emptySpace/2) - 10);// -10 for some browers to remove the right toggle control width
}
// on start 
$('.centerSelect').each(function(){
  centerSelect($(this));
});
// on change
$('.centerSelect').on('change', function(){
  centerSelect($(this));
});

    Full Codepen here: http://codepen.io/anon/pen/NxyovL

    0 讨论(0)
  • 终归单人心
    2020-11-22 12:04

    this worked for me:

    text-align: center;
text-align-last: center;
    0 讨论(0)
    • 上一页 1 2 3 4 下一页
     看不清?
    提交回复
    热议问题