Javascript CSS-动态对齐创建的下拉框_Javascript_Html_Css_Drop Down Menu

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

javascript html css drop-down-menu

Javascript CSS-动态对齐创建的下拉框,javascript,html,css,drop-down-menu,Javascript,Html,Css,Drop Down Menu,我正在尝试对齐下图中的两个下拉框： Javascript（用于第一个下拉框） HTML: 优惠券类别搜索！我只复制了我认为相关的部分是否有人知道如何使两个文本框在中间对齐？谢谢你的帮助试试这个例子 <div id="subCategory"> <div>categories</div> <div> <select > <option>lorem 1</option>

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

Javascript（用于第一个下拉框）

HTML:


优惠券类别
搜索！

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

是否有人知道如何使两个文本框在中间对齐？

谢谢你的帮助

试试这个例子

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

拨弄

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

使用文本缩进和调整值，但这仅适用于选择的选项（可见的选项），但不太可靠
使用ul列表和li项目制作自定义下拉列表（对于istance，或者您喜欢的任何其他标记）并为其编写自定义逻辑显示/隐藏项目列表；这样文本对齐：居中将起作用所有项目罚款
使用可与文本对齐调整的文本对齐：居中

只需在你的身体上添加一点代码

代码：

使用

文本对齐：居中将整个输入字段区域包装在div上
（包含div的地方有边框，这样你们就可以更好地看到发生了什么）最好的办法是设置div的宽度和高度，这样你们的css就可以工作了
#category
{   
text-align:center;
margin:0px auto;
display:block;
}

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

<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>

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

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

body{
    text-align:center;
}