我有定心具有最大寬度元件設置內容的問題。左右間距不一樣。 This is a pen to my project。該問題似乎源於 side-post, span_1_of_3，因爲右邊的可變保證金。不能居中複雜的內容與最大寬度設定
我試圖
.inner {
display: table;
margin: 0 auto;
}
.outer2{
margin: 0 auto;
display: table;
text-align:center;
}
我有點困惑，這可能是解決這一萬阿英，蔣達清。任何想法如何解決它？
此圖像顯示了cenetering問題，我面對：
您可以使用display：彎曲的.outer2和證明內容：中心對齊項：中心，它應集中你所有的內容
@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>更改側柱的CSS。您的利潤率設置正確，但side_post具有固定的寬度。它應該是100％。
老CSS
.side-post {
background: #fff;
margin: 0 auto 1.5em auto;
width: 15em;
padding: 20px;
}
新的CSS
.side-post {
background: #fff;
/* margin: 0 auto 1.5em auto; */
width: 100%;
padding: 20px;
box-sizing: border-box;
}
不工作:( – sanjihan
你談論任何具體的響應狀態？ –
什麼是'MAX-width'元素應用到它是不居中？ – TylerH
。容器元素 – sanjihan
嗯，實際上在div上居中工作。這完全是一個旁發，span_1_of_1的問題。這比我原先想象的更復雜。 – sanjihan