<分区>
<分区>
您好，我有一个 Bootstrap 框架，并选择动态宽度: HTML
<select class="form-control" id="selectCenter">
<option data-ng-value="20" value="20">20</option>
<option data-ng-value="50" value="50">50</option>
<option data-ngvalue="100" value="100">100</option>
</select>
CSS Bootstrap
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
我试过用 css:
#selectCenter {
text-align: center;
}
但它不起作用。 我可以仅使用 css 将选择的文本居中吗？
最佳答案
你的代码工作正常，你可以简单地用 text-align:center 尝试使用代码片段来解决这个问题
#selectCenter {
text-align: center;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}<select class="form-control" id="selectCenter">
<option data-ng-value="20" value="20">20</option>
<option data-ng-value="50" value="50">50</option>
<option data-ngvalue="100" value="100">100</option>
</select>关于html - 使用 Bootstrap 选择文本居中对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42066943/