2016-05-17 5 views
0

私のDivコンテナを私のイメージを中心にすることができないようです。私は余白0を試しました。幅を加えます。私のDIVコンテナを中央に持っていくことの問題

body{ 
 
\t margin: 0px; 
 
\t } 
 

 
.main{ 
 
\t height: 950px; 
 
\t background: url(../Images/Mountain.jpg) center center/cover no-repeat; 
 
\t } 
 

 
@media screen and (min-width: 1000px;){ 
 
\t #container{ 
 
\t height: 1000px; 
 
    width: 1000px; \t 
 
    margin: 0 auto; 
 
    \t } 
 
\t } 
 

 
.header{ 
 
\t margin-top: 0px; 
 
\t width: 100%; 
 
\t } 
 

 
.logo{ 
 
\t float: left; 
 
\t margin-top: 10px; 
 
\t margin-left: 50px; 
 
\t } \t 
 

 
nav{ 
 
\t float: right; 
 
\t margin-top: 26px; 
 
\t margin-right: 50px; 
 
\t } 
 

 
.navBar{ 
 
\t color: #fff; 
 
\t font-size: 20px; 
 
\t margin-left: 25px; 
 
\t text-decoration: none; 
 
\t } 
 

 
.navBar:hover{ 
 
\t text-decoration: underline; 
 
\t } 
 

 
span{ 
 
\t width: 100%; 
 
\t } 
 

 
h1{ 
 
\t font-size: 80px; 
 
\t color: #fff; 
 
\t text-align: center; 
 
\t clear: both; 
 
\t padding-top: 200px; 
 
\t } 
 

 
h2{ 
 
\t font-size: 36px; 
 
\t color: #fff; 
 
\t text-align: center; 
 
\t clear: both; 
 
\t margin-top: 50px; 
 
\t } 
 

 
/*Header Section*/ 
 

 
#head{ 
 
\t width: 100%; 
 
\t height: 400px; 
 
\t background: url(https://static.pexels.com/photos/6934/beach-vacation-water-summer.jpg) center center/cover no-repeat; 
 
\t } 
 

 
.port{ 
 
\t padding-top: 75px; 
 
\t } 
 

 
.portfolio{ 
 
\t width: 300px; 
 
\t height: 250px; 
 
\t } 
 

 
.padding{ 
 
    \t margin-left: 50px; 
 
\t } 
 
.container_port{ 
 
\t width: 1000px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
}
<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <title>-------</title> 
 

 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <link rel="shortcut icon" type="text/css" href="http://placehold.it/50x50"> 
 
\t \t <link rel="stylesheet" href="CSS/Style.css"> 
 

 
\t </head> 
 
\t <body> 
 
\t \t <div id="head"> 
 
\t \t <div class="header"> 
 
\t \t \t <img class="logo" src=http://placehold.it/100x100> 
 

 
\t \t \t <nav> 
 
\t \t \t \t <a class="navBar" href="#">Home</a> 
 
\t \t \t \t <a class="navBar" href="#">Portfolio</a> 
 
\t \t \t \t <a class="navBar" href="#">Blog</a> 
 
\t \t \t \t <a class="navBar" href="#">Testimonials</a> 
 
\t \t \t </nav> 
 
\t \t </div> 
 
\t \t <span> 
 
\t \t \t <h1 class="port">Portfolio</h1> 
 
\t \t </span> 
 

 
\t </div> \t 
 
\t <div id="container_port"> 
 

 
\t \t \t <div class="one"> 
 
\t \t \t \t <img class="portfolio" src="http://placehold.it/300x300"> 
 
\t \t \t \t <img class="portfolio padding" src="http://placehold.it/300x300"> 
 
\t \t \t \t <img class="portfolio padding" src="http://placehold.it/300x300"> 
 
\t \t \t </div> 
 
\t \t \t <div class="two"> 
 
\t \t \t \t <img class="portfolio" src="http://placehold.it/300x300"> 
 
\t \t \t \t <img class="portfolio padding" src="http://placehold.it/300x300"> 
 
\t \t \t \t <img class="portfolio padding" src="http://placehold.it/300x300"> 
 
\t \t \t </div> 
 
\t \t \t <div class="three"> 
 
\t \t \t \t <img class="portfolio" src="http://placehold.it/300x300"> 
 
\t \t \t \t <img class="portfolio padding" src="http://placehold.it/300x300"> 
 
\t \t \t \t <img class="portfolio padding" src="http://placehold.it/300x300"> 
 
\t \t \t </div> 
 
\t \t \t <div class="four"> 
 
\t \t \t \t <img class="portfolio" src="http://placehold.it/300x300"> 
 
\t \t \t \t <img class="portfolio padding" src="http://placehold.it/300x300"> 
 
\t \t \t \t <img class="portfolio padding" src="http://placehold.it/300x300"> 
 
\t \t \t </div> 
 

 
\t </div> 
 
\t </body> 
 
</html>

答えて

0

これはあなたに近づく必要があります。

#container_port { 
    text-align: center; 
} 

編集:私もちょうどあなたがそれを明確にIDとはありませんしながら、上記のあなたのCSSで.container_portを持っていることに気づいクラス。

+0

ありがとうございます!それは完璧に機能しました。私がすべてを移していたときのIDとクラス、そして事故の場合のように! –

+0

喜んで助けてください!あなたはその答えを受け入れることができますか?ありがとう! – johnniebenson

0

イメージ要素はインラインブロック要素です。ブロックレベルの要素に変更することもできますし、margin:0 50%を使用することもできます。

関連する問題