I'm having trouble centering an element inside another element that's fixed:
bottombanner is inside html body:
<div id="bottombanner">
<div>
<ul>
<li><a href="contact.html">ContactUs</a></li>
<li><a href="about.html">AboutUs</a></li>
<li><a href="help.html">Help</a></li>
<li><a href="bugs.html">BugReportBox</a></li>
<li><a href="suggestions.html">SuggestionBox</a></li>
</ul>
</div>
</div>
css is linked properly:
#bottombanner{
position:fixed;
width:100%;
bottom:0;
}
#bottombanner > div {
position:absolute;
width:100%;
}
#bottombanner > div > ul {
position:relative;
margin-left:auto;
margin-right:auto;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
-webkit-padding-start: 0;
}
Add height to #bottombanner
(at least, it was necessary for my fiddle) and add text-align: center
to #bottombanner > div
:
#bottombanner{
position:fixed;
width:100%;
bottom:0;
height: 130px;
}
#bottombanner > div {
position:absolute;
width:100%;
text-align:center;
}
#bottombanner > div > ul {
position:relative;
margin-left:auto;
margin-right:auto;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
-webkit-padding-start: 0;
}
Fiddle: http://jsfiddle.net/kboucher/cFgNx/
You have to set the display attribute of the centered element to block and set the width of the element.
#bottombanner > div > ul {
position:relative;
margin-left:auto;
margin-right:auto;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
-webkit-padding-start: 0;
display:block;
width:200px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With