So, I have this list that I want to center using some CSS magic.
I did some searching and found a solution to remove the list style and left margin. But I really want to make sure it's perfectly centered, so I added text-align:center;. However, I noticed an indent issue that prevents it from being exactly in the center like I intended.
If you need to see an example, check out tst.burngames.net
Apparently, code is necessary when describing websites..
This is my HTML:
<body>
<div id="search">
<input id="search_input" placeholder="Search for game.">
<ul id="search_list">
<li>
One
</li>
<li>
Two
</li>
<li>
Three
</li>
</ul>
</div>
</body>
And here's my CSS:
body {
background: url(../images/fire.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#search {
background-color:white;
border-color:black;
border-style:double;
border-width: thick;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
width:600px;
height:100%;
}
#search_input {
width:99%;
height:50px;
margin-top:20px;
text-align:center;
}
#search_list {
width: 99%;
margin-left:auto;
margin-right:auto;
}
li {
list-style-type:none;
padding-left: 0px;
margin-top:10px;
margin-bottom:10px;
text-align:center;
}