私は問題を抱えてmargin:0 auto;います。解決策は簡単だと確信していますが、何か間違ったことをしているだけです。これは私が自分で作成した最初の Web サイトであり、さまざまなブロックを中央に配置する際に問題が発生しています。
コンテンツが中央に配置されていないという最初の問題は、h2セレクタークラスと記事クラスの親です。はmargin:0 auto;何もしていません。に追加margin:0 auto;するcontent h2と、機能し始めました。まだ完全に理解していないので、説明するのは難しいです。私はこれを得た：
content {
width:auto;
max-width:1360px;
margin:0 auto;
}
content h2 {
width:auto;
max-width:900px;
margin:40px auto 0 auto;
text-align:center;
font-size:1.6em;
font-family:"Open Sans", sans-serif;
letter-spacing:0.2em;
color:#92908d;
line-height:40px;
font-weight:600;
}
margin:0 autoコンテンツの最初の が で機能しないのはなぜcontent h2ですか? また、記事が中央に配置されていないという問題があります。現在はほとんど適切に設定されていますが、中央に配置されていないのはなぜですか?
これが私の完全なhtmlコードです
<div class="blackbar"></div>
<header>
<section class="top">
<h1>stwórz swój własny antydot</h1>
<ul>
<li>
<img src="img/icons/home.png" alt="moje konto"/><a href="#">moje konto</a>
</li>
<li>
<img src="img/icons/register.png" alt="rejestracja"/><a href="#">rejestracja</a>
</li>
</ul>
</section>
<section class="banner">
<img src="img/banner/slide1.jpg">
</section>
<div class="blackbar2">
<section class="lowerbar">
<nav>
<ul>
<li><a href="#">O nas</a></li>
<li><a href="#">aktualności</a></li>
<li><a href="#">sklep</a></li>
<li><a href="#">kolekcje</a></li>
</ul>
</nav>
<div class="logo">
<img src="img/logo.png"/>
</div>
</section>
</header>
<content>
<h2>Lorem ipsum dolor sit amet, <br>
consectetur adipiscing elit. vel est diam, vel fermentum eros. </h2>
<div class="seperator"></div>
<section class="maincontent">
<article class="left">
<h3>O nas</h3>
<img src="img/content/leftbw.jpg" alt="kołnierzyki">
<h4>InInteger elementum</h4>
<p>>massa at nullażżżż placerat varius. Suspendisse in libero risus, in interdum massa.</p>
<p>Vestibulum ac leo vitae metus faucibus gravida ac in neque. Nullam est eros, </p>
<p>suscipit sed dictum quis, accumsan a ligula. reet volutpat molestie. </p>
<a href="#">Czytaj...</a>
</article>
<article class="mid">
<h3>wpisy</h3>
<img src="img/content/midbw.jpg" alt="blog">
<h4>Tytuł</h4>
<p>29/06/2013</p>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. a pellentesque dui, non feli....</p>
<h4>Tytuł</h4>
<p>29/06/2013</p>
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. a pellentesque dui, non feli....</p>
<a href="#">czytaj...</a>
</article>
<article class="right">
<h3>kontakt</h3>
<img src="img/content/rightbw.jpg" alt="kontakt">
<form>
</form>
<ul>
<li><a href="#"><img src="img/content/iconfacebook.png" alt="facebook"></a></li>
<li><a href="#"><img src="img/content/iconyoutube.png" alt="youtube"></a></li>
<li><a href="#"><img src="img/content/icontwitter.png" alt="twitter"></a></li>
<li><a href="#"><img src="img/content/icongoogle.png" alt="google"></a></li>
</ul>
</article>
</section>
</content>
<footer>
<p>Copyright © 2012 - <a href="#">Antydot.com</a> - All rights reserved</p>
<ul>
<li><a href="#">O nas</a></li>
<li><a href="#">aktualności</a></li>
<li><a href="#">sklep</a></li>
<li><a href="#">kolekcje</a></li>
</ul>
</footer>
<div class="footerbar"></div>
これまでの私の完全なCSS
a {
text-decoration: none;
color: inherit;
transition: color .5s ease;
}
body {
background:#f8f1ea;
font-family:"Open Sans", sans-serif;
color:#656565;
}
a:hover {
color: #b1473f;
}
.blackbar {
position:absolute;
z-index:-1;
width:100%;
height:50px;
background-color:#363636;
}
.top {
width:100%;
max-width:1360px;
margin:0 auto;
}
.top h1 {
float:left;
margin:5px 0 5px 20px;
font-family:"Open Sans", sans-serif;
font-size:18px;
color:#d1d0d0;
font-weight:bold;
text-transform:uppercase;
letter-spacing:0.1em;
}
.top ul li {
list-style-type:none;
display:inline-block;
float:right;
margin:5px 20px 5px 0;
position:relative;
text-transform:uppercase;
color:#d1d0d0;
letter-spacing:0.15em;
font-weight:500;
font-size:15px;
font-family:"Open Sans", Sans-Serif;
}
.top ul li img {
margin:0 15px 0 0;
}
.blackbar2{
position:relative;
max-width:2500px;
width:100%;
height:80px;
background-color:#1d1d1d;
}
.lowerbar {
width:100%;
max-width:1360px;
margin:0px auto 0 auto;
position:relative;
z-index:999;
}
.banner img {
width:100%;
}
.logo {
margin:0 0 5px 20px;
position:relative;
top:23px;
z-index:10;
}
nav ul {
list-style:none;
}
nav ul li {
display:block;
float:right;
padding:0 20px;
position:relative;
z-index:12;
top:23px;
color:#d1d0d0;
}
nav ul li a {
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-size:15px;
font-weight:500;
}
content {
width:auto;
max-width:1360px;
margin:0 auto;
}
content h2 {
width:auto;
max-width:900px;
margin:40px auto 0 auto;
text-align:center;
font-size:1.6em;
font-family:"Open Sans", sans-serif;
letter-spacing:0.2em;
color:#92908d;
line-height:40px;
font-weight:600;
}
.seperator {
height:1px;
background:#de564b;
max-width:900px;
margin:0 auto 0 auto;
border-bottom:1px solid #de564b;
position:relative;
top:40px;
}
.maincontent {
width:auto;
max-width:1360px;
margin:0 auto;
padding:70px 0 45px 0;
}
.maincontent article {
width:250px;
margin-right:45px;
float:left;
}
footer {
clear:both;
}