CSS - wie man Website für große Bildschirme zentriert (ohne Bootstrap)

Vielleicht wurde dies bereits beantwortet, konnte aber weder in Google, noch in Stackoverflow die Lösung finden. Neuling hier.CSS - wie man Website für große Bildschirme zentriert (ohne Bootstrap)

Ich benutze einen großen Bildschirm zu Hause und verwende selten den Browser im Vollbildmodus. Aber heute habe ich versucht zu sehen, wie eine Website, die ich teste, aussehen würde, und es ist hässlich. Im normalen Browser ist es in Ordnung, aber auf einem großen Bildschirm ist alles auf der linken Seite. Wie kann ich es für große Bildschirme zentrieren?

Ich weiß, ich könnte es füllen und Dinge für große Bildschirme größer machen, aber ich möchte lernen, wie dies zu tun, falls ich es brauche.

Hier ist meine HTML und CSS-Dateien

<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="style.css"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title></title> 
</head> 


<header class="col-12"> 
    <!--logo--> 
    <div class="col-3 logo"> 
    <img alt="logo" src="logo-lxfcl-new.png" width="210" height="54"> 
    </div> 

    <div class="col-9 topMenu"> 
    <h4>Welcome</h4> 
    <!--top menu--> 
    <nav> 
     <ul> 
     <li>Home</li> 
     <li>Annonces</li> 
     <li>Comment faire</li> 
     <li>contacts</li> 
     </ul> 
    </nav> 
    </div> 
</header> 

<!--left menu--> 
<nav class="col-3 sidemenu"> 
    <ul> 
     <li>Ateliers</li> 
     <li>Associations</li> 
    </ul> 
</nav> 

<main class="col-9 sectionColor"> 
    <section> 
    sdfsdefwef 
    </section> 
</main> 

<!--footer--> 
<footer class="col-12"> 
    copyright 
</footer>

/*defining the grid system*/ 
* { 
box-sizing: border-box; 
} 

.col-1 {width: 8.33%;} 
.col-2 {width: 16.66%;} 
.col-3 {width: 25%; max-width: 300px;} 
.col-4 {width: 33.33%;} 
.col-5 {width: 41.66%;} 
.col-6 {width: 50%;} 
.col-7 {width: 58.33%;} 
.col-8 {width: 66.66%; max-width: 900px;} 
.col-9 {width: 75%; max-width: 900px;} 
.col-10 {width: 83.33%;} 
.col-11 {width: 91.66%;} 
.col-12 {width: 100%; max-width: 1200px;} 

[class*="col-"] { 
float: left; 
padding: 10px; 
border: solid 1px; 
} 

.row::after { 
content: ""; 
clear: both; 
display: table; 
} 
/*-------------------------------------*/ 

header, aside, footer, main, nav, section { 
display: block; 
} 
/*---------------------------------------------*/ 



body { 
font-family: roboto; 
font-size: 1em; 
line-height: 150%; 
background-color: #dddddd; 
margin: 0 auto; 
} 

.logo { 
float:left; 
} 

.logo img { 
display: block; 
margin-left: auto; 
margin-right: auto; 
} 

.topMenu { 
float:left; 
clear: right; 
padding: 0px; 
text-align: center; 
} 

.topMenu nav, 
.topMenu h4 { 
padding: 0; 
} 

.topMenu li { 
display: inline; 
list-style-type: none; 
color: #5e2f2f; 
padding-right: 30px; 
} 



.sidemenu li { 
border-bottom: dotted 1px #5e2f2f; 
list-style-type: none; 
line-height: 200%; 
color: #72a1e7; 
margin-left: -40px; /*this is because of the default webkit-padding*/ 
max-width: 300px; 
} 



nav { 
clear: left; 
padding-top: 10px; 
font-size: 0.9em; 
} 



.sectionColor { 
background-color: white; 
} 



footer { 
clear: both; 
text-align: right; 
padding-right: 20px; 
font-style: italic; 
font-size: 0.8em; 
}

Quelle

2017-02-12 fields

Also, Sie wollen nicht Bootstrap, aber Sie versuchen, Bootstrap zu replizieren? . . . Was?! –

ich lerne, und ich möchte nicht eine externe Bibliothek oder ein Framework aufrufen. Ich möchte alles tun, damit ich lernen und verstehen kann, was ich tue. Später werde ich es benutzen. – fields

Das macht Sinn. Erneutes Implementieren von Teilen des Frameworks, um zu verstehen, warum sie das tun. Sie sollten auch die Dokumentation und die Kommentare zum Code lesen. Die werden auch helfen. –

Sie können Ihre ganze Seite in einer .wrapper Klasse wickeln, .wrapper max-width Wert in Pixel geben - zum Beispiel 1200px, und es dann Mitte mit: margin: 0 auto.

Quelle

2017-02-12 22:46:52 Plenarto

also sollte ich diese Klasse in body-Element hinzufügen? – fields

@fields wahrscheinlich besser, es als div in den Körper hinzufügen, wenn Sie den Körper in voller Breite in Zukunft benötigen –

perfekt funktioniert.Danke – fields

Der einfachste Weg, wahrscheinlich ein Wrapper einzuführen, ist der gesamte Inhalt auf der Website zu wickeln, wobei die Breite die größte Breite machen übereinstimmen Sie haben in Ihren Spalten (.col-12 - und Sie können diese Breite auf .col-12 jetzt entfernen), und verwenden Sie margin: auto;, um es horizontal zu zentrieren.

/*defining the grid system*/ 
 
* { 
 
box-sizing: border-box; 
 
} 
 

 
.col-1 {width: 8.33%;} 
 
.col-2 {width: 16.66%;} 
 
.col-3 {width: 25%; max-width: 300px;} 
 
.col-4 {width: 33.33%;} 
 
.col-5 {width: 41.66%;} 
 
.col-6 {width: 50%;} 
 
.col-7 {width: 58.33%;} 
 
.col-8 {width: 66.66%; max-width: 900px;} 
 
.col-9 {width: 75%; max-width: 900px;} 
 
.col-10 {width: 83.33%;} 
 
.col-11 {width: 91.66%;} 
 
.col-12 {width: 100%;} 
 

 
.wrap { 
 
    max-width: 1200px; 
 
    margin: auto; 
 
} 
 

 
[class*="col-"] { 
 
float: left; 
 
padding: 10px; 
 
border: solid 1px; 
 
} 
 

 
.row::after { 
 
content: ""; 
 
clear: both; 
 
display: table; 
 
} 
 
/*-------------------------------------*/ 
 

 
header, aside, footer, main, nav, section { 
 
display: block; 
 
} 
 
/*---------------------------------------------*/ 
 

 

 

 
body { 
 
font-family: roboto; 
 
font-size: 1em; 
 
line-height: 150%; 
 
background-color: #dddddd; 
 
margin: 0 auto; 
 
} 
 

 
.logo { 
 
float:left; 
 
} 
 

 
.logo img { 
 
display: block; 
 
margin-left: auto; 
 
margin-right: auto; 
 
} 
 

 
.topMenu { 
 
float:left; 
 
clear: right; 
 
padding: 0px; 
 
text-align: center; 
 
} 
 

 
.topMenu nav, 
 
.topMenu h4 { 
 
padding: 0; 
 
} 
 

 
.topMenu li { 
 
display: inline; 
 
list-style-type: none; 
 
color: #5e2f2f; 
 
padding-right: 30px; 
 
} 
 

 

 

 
.sidemenu li { 
 
border-bottom: dotted 1px #5e2f2f; 
 
list-style-type: none; 
 
line-height: 200%; 
 
color: #72a1e7; 
 
margin-left: -40px; /*this is because of the default webkit-padding*/ 
 
max-width: 300px; 
 
} 
 

 

 

 
nav { 
 
clear: left; 
 
padding-top: 10px; 
 
font-size: 0.9em; 
 
} 
 

 

 

 
.sectionColor { 
 
background-color: white; 
 
} 
 

 

 

 
footer { 
 
clear: both; 
 
text-align: right; 
 
padding-right: 20px; 
 
font-style: italic; 
 
font-size: 0.8em; 
 
}

<head> 
 
<meta charset="utf-8"> 
 
<link rel="stylesheet" href="style.css"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<title></title> 
 
</head> 
 

 
<div class="wrap"> 
 

 
<header class="col-12"> 
 
    <!--logo--> 
 
    <div class="col-3 logo"> 
 
    <img alt="logo" src="logo-lxfcl-new.png" width="210" height="54"> 
 
    </div> 
 

 
    <div class="col-9 topMenu"> 
 
    <h4>Welcome</h4> 
 
    <!--top menu--> 
 
    <nav> 
 
     <ul> 
 
     <li>Home</li> 
 
     <li>Annonces</li> 
 
     <li>Comment faire</li> 
 
     <li>contacts</li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</header> 
 

 
<!--left menu--> 
 
<nav class="col-3 sidemenu"> 
 
    <ul> 
 
     <li>Ateliers</li> 
 
     <li>Associations</li> 
 
    </ul> 
 
</nav> 
 

 
<main class="col-9 sectionColor"> 
 
    <section> 
 
    sdfsdefwef 
 
    </section> 
 
</main> 
 

 
<!--footer--> 
 
<footer class="col-12"> 
 
    copyright 
 
</footer> 
 
    
 
</div>

Quelle

2017-02-12 22:46:16

Zunächst fehlt Ihnen das Element body. Wenn Sie dieses Problem zu beheben, können Sie Ihren Körper Stil:

body { 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
}

Quelle

2017-02-12 22:50:30 Mike

nicht fehlen, ging in den Kopiervorgang verloren :) – fields

Wenn Sie nur horizontal zum Zentrum brauchen als Plenarto sagte, wickeln Sie es in einigen <div> mit width oder max-width Satz in CSS und margin: 0 auto.

Wenn Sie alles auch vertikal zentrieren müssen, müssen Sie es in eine Tabellenzelle oder etwas, das wie eine Tabellenzelle aussieht, platzieren. Ich benutze folgenden Trick in solchen Fällen:

html, body { margin: 0; padding: 0; width: 100%; height: 100% } 
html { display: table } 
body { display: table-cell; vertical-align: middle }

Quelle

2017-02-12 22:52:18 jaboja

würde ich neueste Zentrieren CSS Erfindung verwendet werden, die FLEXBOX Versuchen wird den folgenden Code

.container { 
    display: flex; 
    align-items: center; 
    justify-content: center;}

Im Vergleich zu älteren CSS Zentrierung Methoden Anwendung ist mühelos .

Quelle

2017-02-12 22:56:27

CSS - wie man Website für große Bildschirme zentriert (ohne Bootstrap)

Antwort

Verwandte Themen