Question

我对网络开发很陌生，我正在为我的学校建立一个俱乐部网站。这是http://crsclub.org

我试图让标题文本在顶部div中的整个页面中居中，而不是它根本不承认图片。我在那里得到了正文，从我看到的，我认为其他一切也都会发生。

基本上，计算机维修和分享俱乐部下面的文字都应该位于它下面，“曼彻斯特社区学院”和所有链接。

我使用表格来处理所有内容，但代码非常混乱，我的朋友们告诉我永远不要使用表格来做这类事情。

谁能告诉我我做错了什么？

这是我的header.php（包含在我的网站上的每个页面上，包括php）

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

Answer 1

将h1上方的div更改为100％并添加text-align：center; 我认为在你真正发布这个项目之前，你应该学习更多的标记。

我的标题和<div>没有对齐</div>有问题

1 个答案: