Text Within Div Stuck To The Right Hand Side
Question
The text within the div (Or the UL in other terms) is only staying to the right hand side of the div. It's content won't stay center aligned no matter what I change.
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Lakeside Books</title>
<link rel="stylesheet" type="text/css" href="masterstyle.css">
<meta name="viewsize" content="width-device-width,initial-scale=1.0">
<!--[if IE]>
<script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<nav id="nav">
<div id="searchbar">
<form action="http://www.example.com/search.php">
<input type="text" name="search" placeholder="Enter Book Title"/>
</form>
</div>
<ul>
<li>
<a id="firstlink">
Home
</a>
</li>
<li>
<a id="secondlink">
Categories
</a>
</li>
<li>
<a id="thirdlink">
Bestsellers
</a>
</li>
<li>
<a id="fourthlink">
Contact
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #f1f6f6;
}
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
margin: 2em 1em 1em 1em;
text-align: right;
color: #888888;
display: block;
max-width: 100%;
}
#nav li{
list-style-type: none;
}
#searchbar{
padding-bottom: 0.5em;
text-align: center;
}
#searchbar input{
max-width: 100%;
}
#firstlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#secondlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#thirdlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
#fourthlink{
display: block;
padding: 0.5em 1.5em 0.5em 1.5em;
}
If you look at this image using chromes inspect element you can clearly see that the li container is pushed more to the right than centering itself within the div. Image here - http://i.imgur.com/GfxLGtl.png
JSFiddle with the code included above:
6 answers
solution1
1 2015-04-19 19:56:40
I guess you didn't use CSS reset, so your UL has some default left padding. Add visible borders to your ul and li to see the issue more clearly :>
solution2
1 2015-04-19 20:04:03
If this is what you want to accomplish. There was a text-align center for #nav, but #nav isnt your UL id, it was just a wrapper. By default, the UL elements have a padding-left, which I have removed. You were setting that on the wrapper giving an even bigger value to your left-padding.
I have also removed your LI elements top/bottom paddings, adding it to the link #nav ul li a, for UX purposes.
Hope this is what you have been looking for. Best of luck!
body{ background-color: #f1f6f6; } #sidebar{ background-color: #212528; position: fixed; width: 20%; height: 100%; top: 0; left: 0; overflow: hidden; } #nav{ margin: 2em 1em; color: #888888; display: block; max-width: 100%; } #nav ul { padding-left: 0; } #nav li{ list-style-type: none; padding: 0; text-align: center; } #nav li a { display: block; padding: 0.5em 0; } #searchbar{ padding-bottom: 0.5em; text-align: center; } #searchbar input{ max-width: 100%; }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Lakeside Books</title> <link rel="stylesheet" type="text/css" href="masterstyle.css"> <meta name="viewsize" content="width-device-width,initial-scale=1.0"> <!--[if IE]> <script type="text/javascript" src="_http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <div id="sidebar"> <nav id="nav"> <div id="searchbar"> <form action="http://www.example.com/search.php"> <input type="text" name="search" placeholder="Enter Book Title"/> </form> </div> <ul> <li> <a id="firstlink"> Home </a> </li> <li> <a id="secondlink"> Categories </a> </li> <li> <a id="thirdlink"> Bestsellers </a> </li> <li> <a id="fourthlink"> Contact </a> </li> </ul> </nav> </div> </div> </body> </html>
solution3
0 2015-04-19 19:59:02
Anything under nav is inheriting your text-align:right; . Make a new rule:
#nav >li { text-align:center;}
solution4
0 2015-04-19 20:05:47
Maybe this example will help you: http://jsfiddle.net/kbw6449r/
#sidebar{
background-color: #212528;
position: fixed;
width: 20%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
}
#nav{
margin: 2em 1em 1em 1em;
text-align: right;
color: #888888;
display: block;
max-width: 100%;
}
#searchbar{
padding-bottom: 0.5em;
text-align: center;
}
#searchbar input{
max-width: 100%;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li{
list-style: none;
width: 100%;
text-align: center;
padding: 0.5em 0 0.5em 0;
}
solution5
0 2015-04-19 20:06:20
I think you need to set the UL padding to 0. See this fiddle to see how the default padding causes this:
#nav > ul { padding:0; }
solution6
0 2015-04-19 20:24:32
This may be nice to use, try it:
.my-div{
height: 100%; // or whatever
width: 100%; // or whatever
display: table;
}
.my-div p{
display: table-cell;
text-align: center;
vertical-align: middle;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.