Mobaz
Mobaz

Reputation: 595

Using css to keep elements centered

I'm dynamically adding select dropdowns with jquery into a div. I would like to begin with the div centered and then as the new dropdowns are added to move out from the center outwards.

Here is the CSS for the divs:

#pageMiddle{
    width:940px;
    margin:0 auto;
    text-align: left;
    position:relative;
}
#searchBar{
background: red;
width:500px;
margin: 0 auto;
}
#searchwrapper{
    width:850px;
background: blue;
}

#searchwrapper form {
 display:inline ; 
 margin: 0 auto;

}

and the actual HTML:

<div id="pageMiddle">
<div id="holder">
<div id="searchBar">
    <div id="searchwrapper">    
        <form name="search_input">
            I am looking for a      
            <div id="sBar1" style="display:inline;">
<select id="search_level" class="selectSearchBar" name="search_level">  
                <?php echo "<option>Level</option>";
        while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
        echo "<option value=".$row['id'].">".$row['level']."</option>";
            }?>             
            </select>
                </div>
                <div id="sBar2" class="selectSearchBar"></div>
                <div id="sBar3" class="selectSearchBar"></div>
            tutor in 
<input type=text class="searchbox" id="location"  value="Location"/> 
    <input type=image src="images/search_icon.png "  class="searchbox_submit" name="searchbox_submit"  onclick="searchLocations()" value=""></form>
        </div>
    </div>
</div>
</div>

Upvotes: 0

Views: 123

Answers (2)

Kat
Kat

Reputation: 4695

I assume you mean something like this?

Notice the blue section is centered in the red section. This was done with the table display, which allows something of indefinite size to be centered via automatic margins. Otherwise, it must be a block element and have a definite size.

#searchwrapper
{
    display: table;
    margin: 0 auto;
}

Upvotes: 3

Zach Harvey
Zach Harvey

Reputation: 71

 <?php echo "<option style="text-align:center;">Level</option>";
    while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){
    echo "<option value=".$row['id'].">".$row['level']."</option>";
        }?>             

Let me know if this works please.

Upvotes: 0

Related Questions