Question

我正在尝试对齐下图中的两个下拉框：

Javascript（第一个下拉框）

//create drop-down box
            var s = $('<select/>',{id:"category"});
            $.each(data, function(key, value) {

                $('<option/>', {value: value.category, text: value.category}).appendTo(s);

            });     

            // add the category drop-down box.
            s.appendTo('#categories');

CSS：

#category
{   
text-align:center;
margin:0px auto;
display:block;
}

#categories
{   
font-family: 'underdogregular';
padding: 0px; 
margin: 0px auto;
text-align:center;
width: 280px;       
}

HTML：

<body >

    <div id='categories'>
        <h3 id ='couponCategoriesTitle'>Coupon Categories</h3>          
     </div>

    <div id = 'categorySubmitButtonDiv' >
        <!--Add Category Search Button-->
        <button class = "buttons" onclick="categorySubmit()">Search!</button>
    </div>      

</body>

我只复制了我认为相关的部分。

有人知道如何让两个文本框在中间对齐吗？

感谢您的帮助！

Answer 1

试试这个例子

<div id="subCategory">
    <div>categories</div>
    <div>
<select >
    <option>lorem 1</option>
       <option>lorem 2</option>   
</select>
    </div>
    <input type="button"/>
</div>

<强> CSS

#subCategory{
  text-align:center;
  margin:0 auto;
  display:inline-block;
}

小提琴

http://jsfiddle.net/bjyQk/1/

Answer 2

如果您想将文字集中在下拉列表中，我想到两种可能性：

使用text-indent和tweaking值，但这只适用于选定的选项（可见的选项），并不是那么可靠;
使用ul列表和li项目进行自定义下拉列表（对于istance，或者您喜欢的任何其他标签）并为您编写自定义逻辑显示/隐藏项目清单;这样text-align：center就可以了适用于所有物品;
使用可以使用text-align：center;

plugin

Answer 3

只需将小代码添加到您的身体

的代码：

body{
    text-align:center;
}

Fiddle

Answer 4

使用text-align:center;

将整个输入字段区域包裹在div上

Fiddle（包含div只有边框，所以你可以更好地了解发生了什么）

CSS - 对齐动态创建的下拉框

4 个答案: