CSS - Align dynamically created drop down box
Question
I am trying to align the two drop down boxes in the following image:
Javascript (for 1st drop down box)
//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>
I've only copied over the parts that I thought were relevant.
Would anyone know how I can get the two text boxes aligned in the middle?
Thank you for your help!
4 answers
solution1
0 2013-10-31 11:45:22
Try this example
<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;
}
Fiddle
solution2
0 2013-10-31 11:46:39
If you want to center your text inside your dropdowns, I think of two possibilities:
- using text-indent and tweaking values, but this will work just for the selected option (the one visible), and it's not so reliable;
- making a custom dropdown, using an ul list and li items (for istance, or any other tags you like) and writing your custom logic for showing/hiding list of items; this way text-align: center will work fine for all items;
- using a plugin that could be tweaked with text-align: center;
solution3
0 ACCPTED 2013-10-31 11:54:14
just add the little code to your body
body{
text-align:center;
}
solution4
0 2013-10-31 12:20:04
Wrap your entire input field area on a div with text-align:center;
Fiddle (Containing div has border just so you can better see what's happening)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.