2017-05-05 4 views
0
body { 
    max-width: 1000px !important; 
    margin-right: 5%; 
    margin-left: 5%; 
    height: 100%; 
} 

Probieren Sie meinen Inhalt proportional zu zentrieren, während eine maximale Breite bei 1000px scheint nicht zu funktionieren .. gibt es eine Arbeit um diese? Es ist wichtig, die 5% Margen für dieses Projekt zu halten ..Zentrierung Inhalt mit max-Breite und Seitenränder%

Es richtet alle meine Inhalte auf der linken Seite ..

+0

Ok danke für die Vorschläge .. Ich fand, dass das Entfernen der maximalen Breite im Körper, und das Hinzufügen zu den divs im Inneren des Körpers geholfen, das zentrierte Aussehen zu halten, während die 5% Seitenränder verwenden .. –

Antwort

2

Wenn Sie den Inhalt Ihrer Seite mit einer 5% Marge nach links und rechts zum Zentrum Auf der Auflösung unter 1000px Sie diesen Code verwenden können:

.container{ 
 
    width:90%; 
 
    max-width:1000px; 
 
    margin:0 auto; 
 
    background-color: red; 
 
    height:500px; 
 
}
<body> 
 
    <div class="container"></div> 
 
</body>

Über 1000px zentriert das Inhaltsergebnis in Ihrer Seite.

+0

dies funktioniert am besten! Vielen Dank!!! –

+0

Gern geschehen. –

0

Statt dessen Sie eine div erstellen und fügen Sie CSS auf, dass

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    max-width: 1000px; 
 
    margin: 0px auto; 
 
    height: 100%; 
 
    text-align: center; 
 
}
<div class="wrapper"> Your html code placed here </div>

0

Versuchen Sie Folgendes zu Ihrem Element zu setzen, um die Artikelmitte auszurichten.

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

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}
<div> Loreum Ipsum</div>

0

Sie können es tun, ohne den Body-Tag zu berühren. Div ist gerade genug.

.is-centered { 
 
    max-width: 1000px; 
 
    margin: 0 auto; 
 
    display: block; 
 
    padding: 2px; 
 
    width: 100%; 
 
    text-align: center; 
 
    height: 100%; 
 
} 
 

 
.grey { 
 
    background: grey; 
 
    color: white; 
 
}
<div class="is-centered grey"> 
 
    <p>this is centered!</p> 
 
</div>

0

Ok danke für die Anregungen .. Ich fand, dass im Körper den max-width zu entfernen und sie zu dem divs im Innern des Körpers Zugabe dazu beigetragen, den zentrierten Blick zu halten, während der 5% Seitenrand mit ..

body { 
margin-right: 5%; 
margin-left: 5%; 
height: 100%;} 

<div style="max-width:1920px">content</div>