select option text-align:center的问题

大家在学习CSS的时候肯定会遇到关于文本对齐的问题,一般来说,我们使用text-align:center;就可以解决啦,是的,但是这是针对于一般的情况,对于option是没有用的。那么,今天笔者给大家介绍一种行之有效的方法,那就是使用padding来解决。好啦,闲言少叙,我们进入正题。

用一个例子解释就可以啦:

代码如下:

<select>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
</select>

CSS代码为【很重要】:

select {
    width: 70px;
    height: 37px;
    padding: 0 0 0 40px;
}

这里我们可以看到select的padding的值为0 0 0 40px;

设置这个padding的值为你所需要的就可以啦。

时间: 2024-08-04 17:31:11

select option text-align:center的问题的相关文章

Ajax+juqery+php 之两个select option控件传值

<?php for($i=0;$i<$num;$i++) { $n=$i+1; echo "<tr><td align=center id=th2>$n"; $idd='stt_'.$i ; echo "<input type=text name=kname[$i] value='$kname[$i]'  placeholder='单位检索' class='stt' id=\"$idd\" ></inp

【jq】JQuery对select option的操作

下拉框 <select id="selectID"> <option vlaue="1">1</option> <option vlaue="2">2</option> <option vlaue="3">3</option> </select> jq针对下拉框的基本操作有 //选择更改事件 $("#selectID&qu

jquery获得select option的值和对select option的操作

1.jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#selec

HTML-DOM常用对象的用法(select/option/form/table)

HTML DOM 常用对象: 它对常用HTML元素操作的简化. Select对象 它代表页面上的一个select元素,常用属性有: select.value --当前选中项的value ,没有value,就返回选中项的内容. select.options --保存select下所有option元素对象,相当于: select.getElementsByTagName("option"): select.options.length --保存select下option的个数,清空sele

jQuery 增加 删除 修改select option

jQuery获取Select选择的Text和Value: 1. var checkText=jQuery("#select_id").find("option:selected").text(); //获取Select选择的Text 2. var checkValue=jQuery("#select_id").val(); //获取Select选择的option Value 3. var checkIndex=jQuery("#sele

JQuery select option append

三种方法: $('select').append($('<option>', {value:1, text:'One'})); $('select').append('<option val="1">One</option>'); var option = new Option(text, value); $('select').append($(option));

JQuery 对 Select option 的操作---转载

<select id="selectID" > <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option

JQuery 对 Select option 的操作

心静禅定ing It is my decision,It is my life. JQuery 对 Select option 的操作 下拉框: <select id="selectID" >        <option value="1">1</option>        <option value="2">2</option>        <option value=&q

jquery获得select option的值 和对select option的操作【转藏】

获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:selected").text(); 获取select选中的 value: $("#ddlRegType ").val(); 获取select选中的索引: $("#ddlRegType ").get(0).selectedIndex; 设置select: 设置select 选中的索引: $("#d