Question

我有这个HTML：

<div class="form-group">
                <label for="catId">Category</label>
                <select class="form-control" id="catId" ng-model="intCategory" 
                        ng-options="c.Id as c.Category for c in intCategories">
                    <option value="">--Select--</option>
                </select>
            </div>

我正在使用bootstrap for css和angularjs来呈现选项。除了选项文本看起来与左边对齐外，一切正常。如何将选项文本居中？

Answer 1

好像我在父div标签中包含一个inline-block显示然后工作。真的很奇怪。

这是更新的html：

<div class="form-group" style="display: inline-block;">
                <label for="catId">Category</label>
                <select class="form-control" id="catId" ng-model="intCategory" 
                        ng-options="c.Id as c.Category for c in intCategories">
                    <option class="" value="">--Select--</option>
                </select>
              </div>

Answer 2

您可以尝试使用“文本中心”类，如下所示：

<div class="form-group">
    <label for="catId">Category</label>
    <select class="form-control text-center" id="catId" ng-model="intCategory" ng-options="c.Id as c.Category for c in intCategories">
      <option value="">--Select--</option>
    </select>
</div>

或

<option class="text-center" value="">--Select--</option>

使用Bootstrap可以正常工作。

将选定标记中的渲染选项文本对齐

2 个答案: