2016-04-23 6 views
0

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.

+0

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. –

Antwort

2

#content { 
    width: 100%; 
} 

entfernen oder

#content { 
    box-sizing: border-box; 
} 

standardmäßig hinzufügen, wird die Breite nicht die Polsterung umfassen. Die äußere Breite ist also größer.

+0

Danke Oriol, funktioniert jetzt gut –

0

Dies liegt daran, Ihre #userphoto wird Sie <h1> Prüfung dieses mit position:absolute auf #userphoto aus überlappen.

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; 
 
    position: absolute; 
 
    right: 0; 
 
    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

1

Try this:

add kasten Leimungseigenschaft in #content

#content{ 
box-sizing: border-box; // ADD this 
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; 

}