我无法弄清楚如何将这个表放在中心[HTML - Gumby]

时间：2017-01-03 15:26:33

标签： html css

我正在努力让这张桌子成为我的导航栏的中心，这就是它现在的样子https://9.lithi.io/EodUht.png

任何帮助将不胜感激。提前谢谢！

（显然我对html / css非常新）

#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>

3 个答案:

答案 0 :(得分：0)

确保将<div>与 eight columns 类放在<div>的 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 :) -->

答案 1 :(得分：0)

删除之前的div <div class="eight columns"> 

 <div class="row">
           <div style="overflow-x:auto;">

示例：https://jsfiddle.net/ez8a233d/

答案 2 :(得分：0)

将margin:auto添加到您的表格代码中以使表格居中，并使用text-align:center将内容与中心对齐。

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>

相关问题
最新问题