我的標頭和 <div> 不對齊
[英]Having problems with my header and <div> not aligning
問題描述
我是Web開發的新手，正在為我學校的一個俱樂部創建一個網站。 這是http://crsclub.org
我試圖使標題文本位於頂部div的整個頁面的中心，而根本不承認圖片。 我在那里取得了主要內容，從我所看到的內容中，我認為其他所有內容也都將繼續進行。
基本上，“計算機維修和共享俱樂部”下面的文本應全部位於“曼徹斯特社區學院”和所有鏈接的下面。
我曾經對所有內容使用表格，但是代碼非常混亂，我的朋友告訴我永遠不要將表格用於此類事情。
誰能告訴我我在做什么錯？
這是我的header.php（包含在我的網站上每個頁面的php include）
<!DOCTYPE html>
<html>
<head>
<title>CRS Club <?php echo $page; ?></title>
<script src="/resources/jquery.js"></script>
<script src="/resources/konami.js"></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="boxed_header disable-select" style="float:center;">
<div class="absolute" style="float:left; width:20%">
<img src="http://crsclub.org/images/logo.png" height="142" width="142" />
</div>
<div class="absolute center">
<div style="width:80%">
<h1>Computer Repair and Share Club</h1>
<h4>of Manchester Community College</h4>
</div>
<div style="width:80%">
<a align=center href="http://crsclub.org">Home</a> | <a align=center href="http://crsclub.org/links.php">Links</a> | <a href="http://crsclub.org/events.php">Events</a> | <a href="http://crsclub.org/contact.php">Contact Us</a> | <a href="http://crsclub.org/diagnostics.php">Self-Help</a> | <a href="http://crsclub.org/services.php">Our Services</a>
</div>
</div></div>
<xfs class="disable-select">
<br></xfs>
這是我的CSS
body {background-color: #454079;}<!--#161058!-->
/*Header properties, Absolute keeps items in any position on page.*/
.absolute {
position:absolute;}
td{min-width:142px;}
.center {margin:auto;}
/*Disable header dragging mess.*/
.disable-select {-webkit-user-select: none;
-moz-user-select: none;-ms-user-select: none;
user-select: none;}
img {pointer-events: none;}
/*Fonts*/
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
/*For bottom content boxes.*/
div.content{width:60%;
min-width:420px;
border:solid 2px #1A1A1A;
border-radius:5px;
padding:10px;
margin-left:auto;
margin-right:auto;
background-color:#F1F1F1;}
.border{border:solid 1px #000000;}
/*Link formatting.*/
.lks {text-align: center;}
a:link {color:blue;text-decoration:none;}
a:visited {color:blue;text-decoration:none;}
a:hover {color:#00008A;}
/*Table formatting.*/
h1 {color:black; text-align:center; vertical-align:text-top; font-family:verdana; font-size:28; }
td {vertical-align: top;}
table {background-color: #F1F1F1}
.boxed_header {border:2px solid #a1a1a1;padding:10px 40px;
background:#F1F1F1;border-radius:14px;}
.boxed_body {border:0px solid #a1a1a1;background:#F1F1F1;width:50%;border-radius:14px;margin:auto;}
擺弄： http : //jsfiddle.net/9FkK4/
老實說，我已經嘗試了很多，投入了很多小時，我無法弄清楚。
另外，這是我的舊標頭，看起來就像我希望它在客戶端顯示的方式，但對表卻很亂。
<body>
<table>
<tr><td>
<a href="index.php"><img src="images/logo.png" height="142" width="142"/></a>
</td>
<td width=100% align=center>
<h1>Computer Repair and Share Club</h1>
<a align=center href="index.php">Home</a> | <a align=center href="links.php">Links</a> | <a href="events.php">Events</a> | <a href="contact.php">Contact Us</a> | <a href="diagnose.php">Diagnostics</a> | <a href="services.php">Our Services</a>
</td></tr></table>
<hr>
</body>
1 個解決方案
解決方案1
1 已采納 2013-11-23 09:13:23
將h1上方的div更改為100％，然后添加text-align：center; 我認為您應該在真正發布該項目之前學習更多的標記。
對齊標題內容時遇到問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.