css - I cannot figure out how to center my div content -
using code posted below.
i want center div , text inside center of webpage. end result still showing div , content on top left.
i have tried setting margins 0 auto.
a { float: left; width: 8em; text-decoration: none; color: white; background-color: #0094ff; padding: 0.2em 0.4em; border-right: 1px solid white; margin-left:0 auto; margin-right:0 auto; } a:hover { background-color: #00ff90; } li { display: inline; } div { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #horizontal-list ul { list-style:none; width:10%; padding-right:20px; } #horizontal-list ul li { list-style:none; margin:0 auto; display:inline-block; }html below:
<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="sitestyles.css"> <title>blahblah</title> </head> <body> <div id="menu-outer"> <div class="table"> <ul id="horizontal-list"> <li><a href="#"><img src="image.png" onmousedown="return false;" alt="something" /></a></li> <li><a href="#"><img src="image.png" onmousedown="return false;" alt="something" /></a></li> <li><a href="#"><img src="image.png" onmousedown="return false;" alt="something" /></a></li> <li><a href="#"><img src="image.png" onmousedown="return false;" alt="something" /></a></li> <li><a href="#"><img src="image.png" onmousedown="return false;" alt="something" /></a></li> </ul> </div> </div> </body> </html>
you need add width div want center. otherwise margin:auto; not know how calculate margins.
here example of how - jsfiddle
and here code makes possible:
.table{ margin: auto; width: 50% } here definitive guide centering in css.
if had else in mind, comment below. thanks
Comments
Post a Comment