1. Zuhause
  2. Frage und Antwort
  3. kann komplexen Inhalt mit max-width set nicht zentrieren

kann komplexen Inhalt mit max-width set nicht zentrieren

2016-12-01 35 views
-1

Ich habe ein Problem mit der Zentrierung von Inhalten, die Max-Breite-Element festgelegt hat. Der Abstand links und rechts ist nicht gleich. This is a pen to my project. Das Problem scheint von side-post, span_1_of_3 aufgrund des variablen Rands auf der rechten Seite zu stammen.kann komplexen Inhalt mit max-width set nicht zentrieren

Ich versuchte

.inner { 
     display: table; 
     margin: 0 auto; 
    } 

.outer2{ 
    margin: 0 auto; 
    display: table; 
    text-align:center; 
    }

Ich bin ein wenig verwirrt darüber, was die Lösung für dieses Probelm sein könnte. Irgendwelche Ideen, wie man es löst?

Dieses Bild zeigt die cenetering Problem, das ich bin vor:

enter image description here

Quelle

2016-12-01 sanjihan

+0

Was ist das Element mit 'max-width' darauf angewendet, das nicht zentriert? – TylerH

+0

.container element – sanjihan

+0

Hm, eigentlich ist das Zentrieren auf einem Div. Es ist nur ein Problem von Side-Post, span_1_of_1. Das ist komplexer als ich ursprünglich dachte. – sanjihan

Antwort

0

Sie Anzeige verwenden können: flex auf .outer2 und rechtfertigen Inhalt: Zentrierung und Ausrichtung-Artikel: Zentrum, sollte es alle Zentrieren Sie Ihre

Inhalt 

@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
/* Base Styles */ 
 

 
body{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t font-size: 16px; 
 
\t line-height: 1.4em; 
 
\t color: #222; 
 
\t background: red; 
 
\t font-family: 'Lato', sans-serif; 
 
} 
 

 
img{ 
 
\t max-width: 100%; 
 
\t height: auto; 
 
\t border-radius: 3px; 
 
} 
 

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

 
} 
 

 
a{ 
 
\t text-decoration: none; 
 
\t color: inherit; 
 
} 
 

 

 

 
/* Grid */ 
 

 
.section { 
 
\t clear: both; 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
.col { 
 
\t display: block; 
 
\t float:left; 
 
\t margin: 1% 0 1% 1.6%; 
 
} 
 
.col:first-child { margin-left: 0; } 
 

 

 
.span_2_of_3 { 
 
\t width: 67.1%; 
 
} 
 
.span_1_of_3 { 
 
\t width: 31.2%; 
 
} 
 

 

 
/* Header & Navigation */ 
 

 

 

 

 

 
/* Blog Posts */ 
 

 
.container{ 
 
\t max-width: 1420px; 
 
\t margin: 0 auto; 
 
\t padding: 20px; 
 
} 
 

 

 

 
.side-post{ 
 
\t background: #fff; 
 
\t margin: 0 auto 1.5em auto; 
 
\t width: 15em; 
 
\t padding: 20px; 
 
} 
 

 

 

 
.side-content{ 
 
\t font-size: .9em; 
 
\t margin-top: 8px; 
 
\t margin-bottom: 0; 
 
} 
 

 

 

 
.date{ 
 
\t 
 
\t text-decoration-color: currentColor; 
 
} 
 

 

 

 
/* Button */ 
 

 
.button{ 
 
\t display: block; 
 
\t padding: 15px 20px; 
 
\t margin-top: .8em; 
 
\t background: #009ACD; 
 
\t text-align: center; 
 
\t color: #fff; 
 
\t font-size: 1.4em; 
 
\t border-radius: 3px; 
 
\t transition: all .4s ease-in; 
 
} 
 

 
.button:hover{ 
 
\t background: #005c7b; 
 
} 
 

 
/*Media Queries*/ 
 

 
@media only screen and (min-width: 1200px) { 
 
.span_2_of_3 { 
 
\t width: 75.1%; 
 
} 
 
.span_1_of_3 { 
 
\t width: 17.2%; 
 
} 
 
} 
 

 
/* @900px*/ 
 
@media only screen and (max-width: 56.25em) { 
 
\t .col{ margin: 1% 0 1% 0%;} 
 
\t .span_2_of_3, .span_1_of_3{ width: 100%; } 
 
\t .side-post{ width: 42%; 
 
\t \t \t float: left; 
 
\t \t \t margin: -2% 0 1% 1.6%;} 
 
} 
 

 
/* @685px*/ 
 
@media only screen and (max-width: 42.813em) { 
 
\t .side-post{ width: auto; 
 
\t \t \t \t padding: 15px; 
 
\t \t \t  margin: -2% auto 8% auto; } 
 
\t .date{ font-size: .9em; } \t \t 
 
} 
 

 
/* @480px */ 
 

 
/* @380px*/ 
 
@media only screen and (max-width: 23.75em) { 
 
\t .side-content{ font-size: .8em; } 
 
\t .button{ padding: 10px 15px; } 
 
} 
 

 

 

 

 
/*CONTENT OF LEFT SIDE*/ 
 
@charset "UTF-8"; 
 
/* CSS Document */ 
 

 
/*PEN STYLES*/ 
 
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto:400,700); 
 

 
.blog-card { 
 
\t transition: height 0.3s ease; 
 
\t -webkit-transition: height 0.3s ease; 
 
\t background: #fff; 
 
\t border-radius: 3px; 
 
\t box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3); 
 
\t margin: 0 auto 1.6%; 
 
\t overflow: hidden; 
 
\t position: relative; 
 
\t font-size: 14px; 
 
\t line-height: 1.45em; 
 
\t height:460px; 
 
\t -webkit-font-smoothing: antialiased; 
 
\t -moz-osx-font-smoothing: grayscale; 
 
} 
 

 

 
.blog-card:hover .details { 
 
\t left: 0; 
 
} 
 

 
.blog-card:hover.alt .details { 
 
\t right: 0; 
 
} 
 

 
.blog-card.alt .details { 
 
\t right: -100%; 
 
\t left: inherit; 
 
} 
 

 
.blog-card .photo { 
 
\t height: 200px; 
 
\t position: relative; 
 
} 
 

 
.blog-card .photo.photo1 { 
 
\t background: url("http://i62.tinypic.com/34oq4o0.jpg") center no-repeat; 
 
\t background-size: cover; 
 
} 
 

 
.blog-card .photo.photo2 { 
 
\t background: url("http://i60.tinypic.com/xeiv79.jpg") center no-repeat; 
 
\t background-size: cover; 
 
} 
 

 
.blog-card .details { 
 
\t transition: all 0.3s ease; 
 
\t -webkit-transition: all 0.3s ease; 
 
\t background: rgba(0, 0, 0, 0.6); 
 
\t box-sizing: border-box; 
 
\t color: #fff; 
 
\t font-family: "Open Sans"; 
 
\t list-style: none; 
 
\t margin: 0; 
 
\t padding: 10px 15px; 
 
\t height: 300px; 
 
    /*POSITION*/ 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: -100%; 
 
} 
 

 
.blog-card .details > li { 
 
\t padding: 3px 0; 
 
} 
 

 
.blog-card .details li:before, .blog-card .details .tags ul:before { 
 
\t font-family: FontAwesome; 
 
\t margin-right: 10px; 
 
\t vertical-align: middle; 
 
} 
 

 
.blog-card .details .author:before { 
 
\t content: "\f007"; 
 
} 
 

 
.blog-card .details .date:before { 
 
\t content: "\f133"; 
 
} 
 

 
.blog-card .details .tags ul { 
 
\t list-style: none; 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.blog-card .details .tags ul:before { 
 
\t content: "\f02b"; 
 
} 
 

 
.blog-card .details .tags li { 
 
\t display: inline-block; 
 
\t margin-right: 3px; 
 
} 
 

 
.blog-card .details a { 
 
\t color: inherit; 
 
\t border-bottom: 1px dotted; 
 
} 
 

 
.blog-card .details a:hover { 
 
\t color: #75D13B; 
 
} 
 

 
.blog-card .description { 
 
\t padding: 10px; 
 
\t box-sizing: border-box; 
 
\t position: relative; 
 
} 
 

 
.blog-card .description h1 { 
 
\t font-family: "Roboto"; 
 
\t line-height: 1em; 
 
\t margin: 0 0 10px 0; 
 
} 
 

 
.blog-card .description h2 { 
 
\t color: #9b9b9b; 
 
\t font-family: "Open Sans"; 
 
\t line-height: 1.2em; 
 
\t text-transform: uppercase; 
 
\t font-size: 1em; 
 
\t font-weight: 400; 
 
\t margin: 1.2% 0; 
 
} 
 

 
.blog-card .description p { 
 
\t position: relative; 
 
\t margin: 0; 
 
\t padding-top: 20px; 
 
} 
 

 
.blog-card .description p:after { 
 
\t content: ""; 
 
\t background: #75D13B; 
 
\t height: 6px; 
 
\t width: 40px; 
 
     /*POSITION*/ 
 
\t position: absolute; 
 
\t top: 6px; 
 
\t left: 0; 
 
} 
 

 
.blog-card .description a { 
 
\t color: #75D13B; 
 
\t margin-bottom: 10px; 
 
\t float: right; 
 
} 
 

 
.blog-card .description a:after { 
 
\t transition: all 0.3s ease; 
 
\t -webkit-transition: all 0.3s ease; 
 
\t content: "\f061"; 
 
\t font-family: FontAwesome; 
 
\t margin-left: -10px; 
 
\t opacity: 0; 
 
\t vertical-align: middle; 
 
} 
 

 
.blog-card .description a:hover:after { 
 
\t margin-left: 5px; 
 
\t opacity: 1; 
 
} 
 

 
@media screen and (min-width: 700px) { 
 
\t .blog-card { 
 
\t \t height: 300px; 
 
\t \t max-width: 900px; 
 
\t } 
 

 
\t .blog-card:hover .photo { 
 
\t \t transform: rotate(5deg) scale(1.3); 
 
\t } 
 

 
\t .blog-card:hover.alt .photo { 
 
\t \t transform: rotate(-5deg) scale(1.3); 
 
\t } 
 

 
\t .blog-card.alt .details { 
 
\t \t padding-left: 30px; 
 
\t } 
 

 
\t .blog-card.alt .description { 
 
\t \t float: right; 
 
\t } 
 

 
\t .blog-card.alt .description:before { 
 
\t \t transform: skewX(5deg); 
 
\t \t right: -15px; 
 
\t \t left: inherit; 
 
\t } 
 

 
\t .blog-card.alt .photo { 
 
\t \t float: right; 
 
\t } 
 

 
\t .blog-card .photo { 
 
\t \t transition: all 0.5s ease; 
 
\t \t -webkit-transition: all 0.5s ease; 
 
\t \t float: left; 
 
\t \t height: 100%; 
 
\t \t width: 40%; 
 
\t } 
 

 
\t .blog-card .details { 
 
\t \t width: 40%; 
 
\t } 
 

 
\t .blog-card .description { 
 
\t \t float: left; 
 
\t \t width: 60%; 
 
\t \t z-index: 0; 
 
\t } 
 

 
\t .blog-card .description:before { 
 
\t \t transform: skewX(-5deg); 
 
\t \t content: ""; 
 
\t \t background: #fff; 
 
\t \t width: 100%; 
 
\t \t z-index: -1; 
 
     /*POSITION*/ 
 
\t \t position: absolute; 
 
\t \t left: -15px; 
 
\t \t top: 0; 
 
\t \t bottom: 0; 
 
\t height:300px; 
 
\t } 
 
}
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Untitled Document</title> 
 

 
\t <link rel="stylesheet" href="css/blog.css"> 
 
\t <link rel="stylesheet" href="css/blog2.css"> 
 

 
</head> 
 

 
<body> 
 
\t <div class="outer2"> 
 
\t <div class="container inner"> 
 
\t \t <div class="section"> 
 
\t \t \t  <div class="col span_2_of_3"> 
 
     \t 
 
<!--LEFT SIDE--> 
 
<div class="blog-card"> 
 
\t <div class="photo photo1"></div> 
 
\t <ul class="details"> 
 
\t \t <li class="author"><a href="#">John Doe</a></li> 
 
\t \t <li class="date">Aug. 24, 2015</li> 
 
\t \t <li class="tags"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">Learn</a></li> 
 
\t \t \t \t <li><a href="#">Code</a></li> 
 
\t \t \t \t <li><a href="#">HTML</a></li> 
 
\t \t \t \t <li><a href="#">CSS</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t </ul> 
 
\t <div class="description"> 
 
\t \t <h1>Learning to Code</h1> 
 
\t \t <h2>Opening a door to the future</h2> 
 
\t \t <p class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eum dolorum architecto obcaecati enim dicta praesentium, quam nobis! Neque ad aliquam facilis numquam. Veritatis, sit. Loren ipsum h Holalala araba aranbd the good dog now. <br> <br> Loren ipsum h Holalala araba aranbd the good dog now. Loren ipsum h Holalala araba aranbd the good dog now. Loren ipsum h Holalala araba aranbd the good dog now. Loren ipsum h Holalala araba aranbd the good dog now. </p> 
 
\t \t <a href="#">Read More</a> 
 
\t </div> 
 
</div> 
 
<div class="blog-card alt"> 
 
\t <div class="photo photo2"></div> 
 
\t <ul class="details"> 
 
\t \t <li class="author"><a href="#">Jane Doe</a></li> 
 
\t \t <li class="date">July. 15, 2015</li> 
 
\t \t <li class="tags"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">Learn</a></li> 
 
\t \t \t \t <li><a href="#">Code</a></li> 
 
\t \t \t \t <li><a href="#">JavaScript</a></li> 
 
\t \t \t </ul> 
 
\t \t </li> 
 
\t </ul> 
 
\t <div class="description"> 
 
\t \t <h1>Mastering the Language</h1> 
 
\t \t <h2>Java is not the same as JavaScript</h2> 
 
\t \t <p class="summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eum dolorum architecto obcaecati enim dicta praesentium, quam nobis! Neque ad aliquam facilis numquam. Veritatis, sit. Loren ipsum h Holalala araba aranbd the good dog now. <br> <br> Loren ipsum h Holalala araba aranbd the good dog now. Loren ipsum h Holalala araba aranbd the good dog now. Loren ipsum h Holalala araba aranbd the good dog now. Loren ipsum h Holalala araba aranbd the good dog now. </p> 
 
\t \t <a href="#">Read More</a> 
 
\t </div> 
 
</div> 
 

 
\t \t \t  </div> 
 
\t \t \t \t 
 
\t \t \t  <aside class="col span_1_of_3"> 
 
\t \t \t \t  <div class="side-post"> 
 
\t \t \t \t \t   <img src="http://placehold.it/800x400&text=img" alt="img"> 
 
      <p class="side-content">Ut noster tractavissent, summis hic eiusmod te quem. Doctrina velit litteris eu eu fore ingeniis philosophari ne quid o ingeniis ne anim, illum ea iudicem. Pariatur duis dolor hic dolor ad vidisse amet elit ita summis, quo duis te malis.</p> 
 
\t \t \t \t  </div> 
 
\t \t \t \t 
 
\t \t \t \t  <div class="side-post"> 
 
\t \t \t \t \t   <p class="side-content">Ultricies lacus et, non orci gravida purus augue integer, sed turpis. Erat dapibus. \t \t \t \t \t \t Eleifend massa scelerisque, aenean penatibus laoreet ut in.</p> 
 
     \t \t \t \t \t <a href="#" class="button">Subscribe!</a> 
 
\t \t \t \t  </div> 
 
\t \t \t  </aside> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 

 
</body> 
 
</html>

Quelle

2016-12-01 17:53:27 Geeky

+0

Hm, es wird deutlich, dass unter 1200px diese Lösung nicht mehr funktioniert. – sanjihan

+0

Ich habe nicht verstanden ... können Sie bitte genauer – Geeky

+0

Ich habe ein Bild hinzugefügt. Siehe den Abstand links und rechts des Hauptinhalts. Es ist rechts größer. – sanjihan

1

entfernen Breite: 15em; Von .Side-Post und Abstand wird gleich sein

Quelle

2016-12-01 17:53:31 Vel

+0

Funktioniert nicht :( – sanjihan

+0

Es tut in dem Stift, den Sie freigegeben haben. Wenn es nicht auf Ihrer Website oder lokal funktioniert, dann ist Ihr Code anders als der Code am Stift oder Ihre CSS im Cache. – Vel

+0

Vielen Dank für Ihre Hilfe Ich glaube, dass Codepen nicht zwischengespeichert wird. Vielleicht haben wir uns gegenseitig missverstanden. Ich habe versucht, den gleichen Abstand ganz links (und Rand des Bildschirms) und ganz rechts (und enge des rechten Bildschirms) des Hauptinhalts zu haben. Es scheint so, aber bei kleineren ist es offensichtlich, dass etwas kaputt ist. – sanjihan

0

Ändern Sie die CSS der Seitenpfosten. Ihre Ränder sind richtig eingestellt, aber die side_post hat eine feste Breite. Es sollte 100% sein.

alte CSS

.side-post { 
    background: #fff; 
    margin: 0 auto 1.5em auto; 
    width: 15em; 
    padding: 20px; 
}

neue CSS

.side-post { 
    background: #fff; 
    /* margin: 0 auto 1.5em auto; */ 
    width: 100%; 
    padding: 20px; 
    box-sizing: border-box; 
}

Quelle

2016-12-01 17:56:07

+0

Funktioniert nicht :( – sanjihan

+0

Sprechen Sie über einen bestimmten reaktionsschnellen Zustand? –

Verwandte Themen

 Verwandte Themen