Frage
I've been trying to figure out forever now why my wrapper div (#searchContents) that I want to use to center four items (text [#inputPrompt], input box [#accountName], submit button [#submit], loading image [#wait]) inside another div (#searchBox) won't work properly.
Here's the HTML:
https://stackoverflow.com/questions/22399747
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<div id="searchBox">
<div id="searchContents">
<span id="inputPrompt">Account Name:</span> <input type="text"
id="accountName" />
<button id="submit">Submit</button>
<img id="wait" src="images/ajax-loader.gif" alt="Loading..." />
</div>
</div>
Here's the CSS:
#searchBox {
background-color: #181818;
width: 30%;
padding: 10px;
border: 1px solid #383838;
border-radius: 4px;
margin-top: 5%;
margin-left: auto;
margin-right : auto;
margin-bottom: 15px;
}
#searchContents {
margin-left: auto;
margin-right: auto;
}
#inputPrompt {
vertical-align: middle;
line-height: 16px;
}
#accountName {
margin-right: 10px;
margin-left: 10px;
vertical-align: middle;
line-height: 16px;
height: 16px;
}
#submit {
width: 20px;
height: 20px;
}
#wait {
vertical-align: middle;
margin-left: 10px;
}
The "#searchContents" is the wrapper, so I set the margin-left and margin-right properties to horizontally align everything within the wrapper, but it still seems to all be left-aligned.
Can anyone point me to the issue and the solution?
Here's a fiddle of the above code: http://jsfiddle.net/T58rc/2/
Lösung
If you want to center the content of #searchContents try text-align: center
#searchContents {
text-align: center
}
This will apply to inline and inline-block elements.
You can use margin: 0 auto in order to center #searchContents inside its parent but then you need to specify a width for #searchContents in order for margin auto to work.
Andere Tipps
Try this:
HTML:
<body>
<div id="page">
<div id="searchBox">
<div id="searchContents"> <span id="inputPrompt">Steam Account:</span>
<input type="text" id="steamName" />
<button id="submit">Submit</button>
<img id="wait" src="http://darkstrikerd.files.wordpress.com/2011/08/load.gif" alt="Loading..." />
</div>
</div>
</div>
</body>
CSS:
* {
color: white;
}
#page {
background-color: grey;
height: 300px;
padding: 10px;
}
#searchBox {
background-color: #181818;
width: 30%;
padding: 10px;
border: 1px solid #383838;
border-radius: 4px;
margin-top: 5%;
margin-left: auto;
margin-right : auto;
margin-bottom: 15px;
}
#searchContents {
width: auto;
min-width: 400px;
max-width: 400px;
margin: 0 auto;
}
#inputPrompt {
vertical-align: middle;
line-height: 16px;
}
#steamName {
margin-right: 10px;
margin-left: 10px;
vertical-align: middle;
line-height: 16px;
height: 16px;
}
#submit {
width: 20px;
height: 20px;
}
#wait {
vertical-align: middle;
margin-left: 10px;
}
NOTE: I've added width: 400px; to the #searchContents You can add another width, but it's nessesary to add a width when you're using margin: 0 auto;
