Ich arbeite an diesem Projekt richtig ein div in CSS zum Zentrum:kann nicht
body {
background: #f0f0f0;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
outline: none;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #313131;
font-size: 62.5%;
line-height: 1;
}
/** typography **/
h1 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
letter-spacing: -0.05em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
\t position: relative;
\t overflow: hidden;
\t white-space: nowrap;
\t text-align: center;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
h2 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.1em;
line-height: 1.4em;
letter-spacing: normal;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
\t position: relative;
\t overflow: hidden;
\t white-space: nowrap;
\t text-align: center;
}
p {
display: block;
font-size: 1.4em;
line-height: 1.55em;
margin-bottom: 22px;
color: #555;
}
a { color: #5a9352; text-decoration: none; }
a:hover { text-decoration: underline; }
.center { display: block; text-align: center; }
/** page structure **/
#w {
width: 90%;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 45px;
}
#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
#userphoto {
display: block;
float: right;
margin-left: 10px;
margin-bottom: 8px;
}
#userphoto img {
display: block;
background: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/** profile nav links **/
#profiletabs {
display: block;
margin-bottom: 4px;
height: 50px;
}
#profiletabs ul { list-style: none; display: block; width: 70%; height: 50px; padding-left: 0;}
#profiletabls ul li { float: left; }
#profiletabs ul li a {
display: block;
float: left;
padding: 8px 11px;
font-size: 1.2em;
font-weight: bold;
background: #eae8db;
color: #666;
margin-right: 7px;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-bottomleft: 0;
border-radius: 5px;
border-bottom-left-radius: 0;
}
#profiletabs ul li a:hover {
text-decoration: none;
background: #dad7c2;
color: #565656;
}
#profiletabs ul li a.sel {
background: #fff;
border-color: #d1cdb5;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
<div id="w">
<div id="content" class="clearfix">
<div id="userphoto"><img src="images/avatar.png" alt="default avatar"></div>
<h1>Minimal User Profile Layout</h1>
<nav id="profiletabs">
<ul class="clearfix">
<li><a href="#projects" class="sel">Projects</a></li>
<!--<li><a href="#activity">Activity</a></li>
<li><a href="#friends">Friends</a></li>-->
<li><a href="#settings">Profile Details</a></li>
<li><a href="#orders">Orders</a></li>
<li><a href="#add-article">Add an article</a></li>
</ul>
</nav>
</div>
</div>
\t \t
Der Hauptinhalt der Seite wird in einem div
namens #w
eingesetzt worden ist. Ich habe margin: 0 auto;
auf #w
angewendet, damit es zentriert wird, aber es funktioniert nicht richtig. Die margin-left
ist immer größer als die rechte Seite, wenn ich versuche, die margin-left
zu reduzieren, habe ich am Ende etwas anderes.
Bitte lassen Sie mich wissen, wie ich dieses Problem beheben kann.
Ihr Problem ist eigentlich der 'Box-sizing' von' # content' es zu ändern, um 'Grenz box' und wird für die Füllung verantwortlich sein, die Sie zu '#w' hinzugefügt haben. –