我无法弄清楚如何将这个表放在中心[HTML - Gumby]
[英]I can't figure out how to center this table [HTML - Gumby]
问题描述
I'm trying to make this table be center with my navbar, this is what it looks like right now https://9.lithi.io/EodUht.png 
我正试着让这个桌子成为我的导航栏的中心，这就是它现在的样子https://9.lithi.io/EodUht.png
Any help would be appreciated. 任何帮助，将不胜感激。 Thanks in advance! 提前致谢！
(I'm very very new to html/css obviously) （显然我对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> 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> 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> 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> 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 个解决方案
解决方案1
0 已采纳 2017-01-03 15:29:34
Make sure you put the <div> with the eight columns class within a <div> with the class row applied as you have done with the other contents. 确保你把<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> Modern Hip hop</h3></th>
</tr>
....
</table>
</div>
</div>
</div>
</div> <!-- don't forget it's corresponding closing tag :) -->
解决方案2
0 2017-01-03 15:33:52
remove the div <div class="eight columns"> that is before 删除之前的div <div class="eight columns">
<div class="row">
<div style="overflow-x:auto;">
Example: https://jsfiddle.net/ez8a233d/ 示例： https ： //jsfiddle.net/ez8a233d/
解决方案3
0 2017-01-03 15:36:09
add margin:auto to your table tag to center the table and use text-align:center to align the contents to center. 添加margin:auto到您的table标签以使表居中并使用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> 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> 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> 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> 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
不能弄清楚如何居中给我的社会图标html - Cant figure out how to center the social icon html I was given
无法弄清楚如何使用边距将图像居中：自动 - Can't figure out how to center image with margin: auto
无法弄清楚如何将div居中到页面 - Can't figure out how to center a div to the page
我不明白为什么 HTML 表单不符合要求 - I can't figure out why HTML form not meeting requirements
我无法弄清楚我的html代码出了什么问题 - I can't figure out what is wrong with my html code
我正在学习 HTML 和 CSS，但我不知道如何联系 forms 工作？ - I'm learning HTML and CSS and I can't figure out how do contact forms work?
所以我正在尝试使用 JavaScript 填充 HTML 表。 我不知道如何解除 arrays 以正确显示数据 - So I am trying to populate a HTML table using JavaScript. I can't figure out how to unshift the arrays to correctly display the data
如何在 html 中的表格中居中显示项目？ - How can I center items in a table in html?
我似乎无法弄清楚如何登录网站并获取HTML - I can't seem to figure out how to Login to a website and get the HTML
无法弄清楚如何制作此PHP Array表 - Can't figure out how to make this PHP Array table
相关标签