2017-01-03 6 views
1

私は、この表には、私のナビゲーションバーで中心となる作るしようとしている、これはそれが今のように見えるものhttps://9.lithi.io/EodUht.pngI [HTML - ガンビー]このテーブルを中央にする方法を見つけ出すことはできません

あるすべてのヘルプは次のようになり感謝。前もって感謝します!

#homenav { 
 
    color:Black; 
 
    padding:1em; 
 
} 
 

 
body { 
 
    background-color: #bdc3c7; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
div.eight-columns { 
 
    Background-color: #ecf0f1; 
 
}
<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Wop Music - Forum</title> 
 
    <meta charset="utf-8" /> 
 
    <script data-touch="gumby/js/libs" src="gumby/js/libs/gumby.min.js"></script> 
 
    <script src="gumby/js/libs/jquery-2.0.2.min.js"></script> 
 
    <link rel="stylesheet" href="gumby/css/gumby.css"> 
 
    <script src="gumby/js/libs/modernizr-2.6.2.min.js"></script> 
 
    <link rel="stylesheet" href="forumhomepage_style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
</head> 
 

 

 
<body> 
 

 
<div class="row"> 
 
    <div class="twelve columns"> 
 
     <h1>Wop</h1> 
 
     <h5><a href="https://twitter.com/wop" target="_blank"><span class="alert success">Twitter </span> </a></h5> 
 
     <h5><a href="https://facebook.com/wop" target="_blank"><span class="alert info">Facebook </span> </a></h5> 
 
    </div> 
 
</div> 
 

 

 
<div class="row"> 
 
    <div id="demo_navbar"> 
 
     <div id="main_nav" class="pretty navbar row"> 
 
      <a href="#" data-trigger="#main_nav > ul" class="toggle"> 
 
       <i class="icon-menu"></i></a> 
 
      <ul class="eight columns"> 
 
       <li><a href="wopindex.html">Home </a> </li> 
 
       <li><span id="homenav">Forum</span></li> 
 
       <li><a href="#">Sign in</a></li> 
 
       <li><a href="#">Register</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
    <div class="eight columns"> 
 

 
     <div class="row"> 
 
      <div style="overflow-x:auto;"> 
 
       <p> Welcome to the Wop forum, the page is under construction and in read only mode</p> 
 
       <table> 
 
        <tr> 
 
         <th><h3>&nbsp; Modern Hip hop</h3></th> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Albums</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Singles</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Music Videos</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Artist News</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>General</a></td> 
 
        </tr> 
 

 
        <tr> 
 
         <th><h3>&nbsp; Early 2000's Hip hop</h3></th> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Albums</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Singles</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Music Videos</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Artist News</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>General</a></td> 
 
        </tr> 
 

 
        <th><h3>&nbsp; 1990's Hip hop</h3></th> 
 
        <tr> 
 
         <td><a>Albums</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Singles</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Music Videos</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Artist News</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>General</a></td> 
 
        </tr> 
 

 
        <th><h3>&nbsp; 80's Hip hop</h3></th> 
 

 
        <tr> 
 
         <td><a>Albums</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Singles</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Music Videos</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Artist News</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>General</a></td> 
 
        </tr> 
 
       </table> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> … 
 

 
     </div> 
 

 
     <div class="row"> … 
 

 
     </div> 
 

 
    </div> 
 

 
<div class="two columns"> 
 
    <div class="row"> 
 
     <p>test</p> 
 
    </div> 
 
</div> 
 

 

 
<div class="row"> 
 
    <div class="twelve columns"> 
 
     <p>Currently the social media pages are in construction.</p> 
 
    </div> 
 
</div> 
 

 
</body> 
 

 

 

 

 
</html>

+0

あなたはテーブルの上に全体のコンテンツや、その後の内容を中央にしたいですか? –

答えて

0

あなたはクラスで<div>eight columnsクラスで<div>を入れていることを確認してください(私は明らかに、HTML/CSSに非常に非常に新しいです)rowが他のコンテンツと同様に適用されます。

<div class="row"> <!-- THIS IS WHAT YOU'RE MISSING --> 
    <div class="eight columns"> 
    <div class="row"> 
     <div style="overflow-x:auto;"> 
      <p> Welcome to the Wop forum, the page is under construction and in read only mode</p> 
      <table> 
       <tr> 
        <th><h3>&nbsp; Modern Hip hop</h3></th> 
       </tr> 
       .... 
      </table> 
     </div> 
    </div> 
    </div> 
</div> <!-- don't forget it's corresponding closing tag :) --> 
+0

ありがとう、これは完全に働いた! –

+0

あなたは大歓迎です:-) – Pineda

0

は、テーブルを中央にして、中心にコンテンツを揃えるためにtext-align:centerを使用するように、テーブルタグにmargin:autoを追加します。

table{ 
    text-align:center; 
    margin:auto; 
    } 

#homenav { 
 
    color:Black; 
 
    padding:1em; 
 
} 
 

 
body { 
 
    background-color: #bdc3c7; 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
div.eight-columns { 
 
    Background-color: #ecf0f1; 
 
} 
 

 
table{ 
 
    text-align:center; 
 
    margin:auto; 
 
    }
<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Wop Music - Forum</title> 
 
    <meta charset="utf-8" /> 
 
    <script data-touch="gumby/js/libs" src="gumby/js/libs/gumby.min.js"></script> 
 
    <script src="gumby/js/libs/jquery-2.0.2.min.js"></script> 
 
    <link rel="stylesheet" href="gumby/css/gumby.css"> 
 
    <script src="gumby/js/libs/modernizr-2.6.2.min.js"></script> 
 
    <link rel="stylesheet" href="forumhomepage_style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
</head> 
 

 

 
<body> 
 

 
<div class="row"> 
 
    <div class="twelve columns"> 
 
     <h1>Wop</h1> 
 
     <h5><a href="https://twitter.com/wop" target="_blank"><span class="alert success">Twitter </span> </a></h5> 
 
     <h5><a href="https://facebook.com/wop" target="_blank"><span class="alert info">Facebook </span> </a></h5> 
 
    </div> 
 
</div> 
 

 

 
<div class="row"> 
 
    <div id="demo_navbar"> 
 
     <div id="main_nav" class="pretty navbar row"> 
 
      <a href="#" data-trigger="#main_nav > ul" class="toggle"> 
 
       <i class="icon-menu"></i></a> 
 
      <ul class="eight columns"> 
 
       <li><a href="wopindex.html">Home </a> </li> 
 
       <li><span id="homenav">Forum</span></li> 
 
       <li><a href="#">Sign in</a></li> 
 
       <li><a href="#">Register</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
    <div class="eight columns"> 
 

 
     <div class="row"> 
 
      <div style="overflow-x:auto;"> 
 
       <p> Welcome to the Wop forum, the page is under construction and in read only mode</p> 
 
       <table> 
 
        <tr> 
 
         <th><h3>&nbsp; Modern Hip hop</h3></th> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Albums</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Singles</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Music Videos</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Artist News</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>General</a></td> 
 
        </tr> 
 

 
        <tr> 
 
         <th><h3>&nbsp; Early 2000's Hip hop</h3></th> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Albums</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Singles</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Music Videos</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Artist News</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>General</a></td> 
 
        </tr> 
 

 
        <th><h3>&nbsp; 1990's Hip hop</h3></th> 
 
        <tr> 
 
         <td><a>Albums</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Singles</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Music Videos</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Artist News</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>General</a></td> 
 
        </tr> 
 

 
        <th><h3>&nbsp; 80's Hip hop</h3></th> 
 

 
        <tr> 
 
         <td><a>Albums</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Singles</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Music Videos</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>Artist News</a></td> 
 
        </tr> 
 
        <tr> 
 
         <td><a>General</a></td> 
 
        </tr> 
 
       </table> 
 
      </div> 
 
     </div> 
 

 
     <div class="row"> … 
 

 
     </div> 
 

 
     <div class="row"> … 
 

 
     </div> 
 

 
    </div> 
 

 
<div class="two columns"> 
 
    <div class="row"> 
 
     <p>test</p> 
 
    </div> 
 
</div> 
 

 

 
<div class="row"> 
 
    <div class="twelve columns"> 
 
     <p>Currently the social media pages are in construction.</p> 
 
    </div> 
 
</div> 
 

 
</body> 
 

 

 

 

 
</html>

関連する問題