Nicht so grundlegende Div Alignment?

Ich bin etwas neu in CSS und dachte, ich wollte etwas Einfaches tun. Ich erstelle eine responsive Seite. Mein Ziel ist es, Folgendes zu erreichen: Alles kleiner als 768px - zentriere jedes div horizontal. Das passiert gerade gut. Zwischen 768px und 1024px zentrieren Sie den Hauptcontainer auf der Seite mit den zwei divs nebeneinander Hauptcontainer div. Alles zentriert derzeit nicht. 1024px weit und höher - Bild Div auf der linken Seite, Text auf der rechten Seite - bündig zum Rand des Nav. Ich bekomme super wackeliges Verhalten hier. Ich bin mir ziemlich sicher, dass ich etwas ziemlich Offensichtliches verpasst habe, da ich neu dabei bin und kopfüber in etwas gesprungen bin, das ich für einfach gehalten habe. Ich habe mir das schon eine ganze Weile angesehen. Könnte jemand versuchen, mir das für dieses Szenario zu erklären? Mache ich etwas für nichtig, indem ich in meinen Medienabfragen den Code referenziere (ich habe bemerkt, dass ich ein Problem hatte, da ich zu einem früheren Zeitpunkt nicht übereinstimmende Eigenschaften deklariert habe)?Nicht so grundlegende Div Alignment?

<body> 
    <header> 
     <img class="style-logo" src="Prism_images/RuckerLogo.png" alt="Logo"> 
     <nav class="style-nav"> 
      <ul> 
       <li><a href="#">Portfolio</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </nav> 
    </header> 
    <div id="Content"> 
    <div class ="style-img"> 
      <img src="Prism_images/Miles---Headshot_200.png"> 
    </div> 
    <div class="style-main" id="Text"> 
     <p>premire cabinetmaker</p> 
    </div> 
</div> 
<footer></footer> 
</body>

Und hier ist die CSS:

header { 
    padding: 20px; 
} 

.style-logo { 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
    background-color: antiquewhite; 
} 

.style-nav ul { 
    list-style-type: none; 
    display: block; 
    padding: 0px; 
} 

.style-nav ul li a { 
    text-decoration: none; 
    color: #414040; 
    text-align: center; 
    display: block; 
    text-transform:uppercase; 
    padding: 2px; 
} 
.style-img { 
    margin-left:auto; 
    margin-right:auto; 
    width: 200px; 
} 

.style-main { 
    margin-left:auto; 
    margin-right:auto; 
    width: 450px; 
} 
.style-main p { 
    color: slategrey; 
    text-align:left; 
    margin-top:0px; 
    margin-left:10px; 
    display:block; 
} 
#Content{ 
    margin-left:auto; 
    margin-right:auto; 
} 

/*Tablet View*/ 

@media (min-width: 768px){ 

    body { 
     max-width: 778px; 
    } 
    .style-logo { 
     float: center; 
    } 
    .style-nav ul li { 
     display: inline-block; 
    } 

    .style-nav ul { 
     text-align: center; 
    } 
    .style-img{ 
     margin-top:0px; 
     width:200px; 
     display:inline-block; 
     } 
    .style-main { 
     margin-top:0px; 
     display:inline-block; 
     } 
    #Content { 
     margin-left:auto; 
     margin-right:auto; 
     display:block; 
    } 
} 
@media (min-width: 1024px){ 

    body { 
     max-width: 1100px; 
    } 

    .style-logo { 
     float: left; 
    } 

    .style-nav { 
     float: right; 
    } 
    .style-img { 
     margin-top: 40px; 
     float:right; 
     display:inline-block; 
    } 
    .style-main { 
     padding:20px; 
     display: inline-block; 
    } 
}

Quelle

2017-03-23 Jess

Dies ist, wie alles zum Zentrum ^^

div { 
 
    display: table; 
 
    margin: 0 auto; 
 
}

<div>I'm centered<div>

Quelle

2017-03-24 00:01:40

Ich habe diesen Code, oberste Ebene, außerhalb meiner Klassen (unter der Überschrift) platziert. Weder Snippet hat etwas getan, um meine Ausrichtung Problem zu helfen ... – Jess

Sie müssen es auf was Sie müssen zentrieren ... –

Also, in jeder einzelnen Klasse? – Jess

Das oder dies.

div { 
    display:block; 
    margin:0 auto; 
}

Quelle

2017-03-24 00:31:41 Jorden1337

Nicht so grundlegende Div Alignment?

Antwort

Verwandte Themen