0

我似乎在我的文件中找不到错误,.css因此我的 JavaScript 显示在页面的中心(现在显示在最左侧)。我想在照片下方居中显示地址和联系人。我正在学习 javascript 课程,所以此时只能使用它而不是其他程序。

错误来自.cssor .js

HTML:

<!doctype html>    
<html lang="en">    
    <head> 

        <meta charset="utf-8"> 

        <link href="css/armchair.css" rel="stylesheet"> 

    </head>

    <body>
        <!-- wrapper  section starts -->
        <div id="wrapper">            

            <!-- header  section starts -->
            <div id="header">
                <img src="images/header.jpg" alt="Armchair Logo" width="975" height="230" class="floatcenter">
            </div>
            <!-- header  section ends -->


            <!-- menu  section starts -->       
            <div id="menu">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="newrelease.html">New Releases</a></li>
                    <li><a href="placeholder.html" >Special Selection</a></li>
                    <li><a href="contact.html" id="current" class="first">Contact</a></li>
                    <li><a href="placeholder.html">On Sale</a></li>
                </ul>
            </div>
            <!-- menu  section ends -->


            <!-- text section starts -->
            <div id="content"></div>
            &nbsp;<img src="images/viewcart.jpg" alt="" width="130" height="59" class="floatright" /> 

            <br><br>

            <img src="images/store.jpg" alt="Armchair Store" width="520" height="347" class="floatcenterb">

            <br><br>


            <div id="contact_details"></div>

            <script type="text/javascript" src="js/contact.js"></script>

            <br/>
        </div>

        <!-- footer section starts -->
        <div id="footer">
            <p class="bottom">Copyright &copy; 2012 JC Design | All Rights Reserved | <a href="#">Terms and Conditions</a></p>
        </div>
        <!-- foot section ends -->  

    <!-- wrapper section starts -->


    </body>
</html>

我的.css文件:

/*--------------Body-----------------*/

html {background-color: #e2e2e2}

body {
   color: #000; background: #fff;
   font-family: "Helvetica Neue",helvetica,arial, sans-serif; 
   font-size: 90%;
   text-align: left;
   width: 975px;
   margin-left: auto;
   margin-right: auto;
}


p {
   margin-left: 25px;
   margin-right: 5px;
   text-align: left;
   font-size: 110%;
}


/*--------------Links formatting------------------*/

a:link { 
   background: #fff; color: #7d890d;
}


a:visited { 
   color: #034769;
}


a:hover {
   color: #034769;  
   text-decoration: none; 
}

a:active{
    background: #63add0; color: #fff;
}

/*Bottom link formatting*/

p.bottom a:link { 
   background: #2d1d06; color: #f9b41f;
}


p.bottom a:visited { 
   color: #fff;
}


p.bottom a:hover {
   color: #7d890d;  
   text-decoration: none; 
}
p.bottom a:active{
    background: #8742d6; color: #fff;
}


/*--------------------Page wrapper----------------*/
#wrapper {
   margin: 0 auto; 
   width: 975px; 
   text-align: left;
}

/*Banner styles*/

#header {

   width: 975px;
   padding-left: 0px;
   padding-bottom: 10px;
   padding-top: 0px;
}


#footer {
   clear: both;
   background: #2d1d06; color: #fff;
   font-family: "Helvetica Neue",helvetica, arial, sans-serif;
   font-size: 90%;
   font-weight: normal;
   width: 975px;
   padding-bottom: 3px;
   padding-top: 3px;
}

#footer p {
   text-align: center;
}

#content
{
   margin-left: 15px;
}

/*---------------Navigation  styles-------------------*/

#menu {
  float: left; 
  margin:0;
  padding-top: 0px;
  width: 100%;
  background: #7d890d; color: #fff;
}  


#menu ul {
  margin: 0px;
  position: relative 
}


#menu ul li {
  display: inline; 
}


#menu ul li a {
  float: left;
  padding: 5px 16px;
  margin-right: 0px;
  background: #7d890d; color: #fff;
  text-decoration: none;
  border-right: 1px solid #e2e2e2;
}


#menu ul li a:hover {
  color: #fff; background: #f9b41f;
  text-decoration: underline;

}

#menu li a#current {
  background: #ba1212; color: #fff;
}



/*-------------Image area--------------*/

img 
{ 
   border: 0px 0px ; 
   padding-top: 30px;
   padding-bottom: 25px;
   border-radius: 0px;
}



.floatcenter {
   float: left;
   margin: 0px;
   padding: 0px; 
   border: none;  
}

.floatcenterb {
   margin: 0px 228px;
   padding: 1px; 
   border: none;  
}

.floatright 
{ 
   display: block;
   float: right; 
   margin: 20px;
   padding: 1px; 
   border: none;
}
.floatright2 
{ 
   float: right; 
   margin: 20px;
   padding: 1px; 
   border: none;
}



/*---------------Headings----------------*/
hr{
  position: relative;
   width: 90%;
   margin-left: 25px;
   margin-right: 25px;
   color: #3ca0d0;
   border: 1px;
   border-style: dotted;
}

h1{
   color: #2d1d06;
   font-size: 140%;
   font-weight: normal;
   margin-left: 25px;

}

h2{
   color: #2d1d06;
   font-weight: normal;
   font-size: 130% ;
   text-align: center;
   text-decoration: underline;
   margin-left: 0px;
}

h3{
   font-size: 120%;
   color: #2d1d06;
   font-weight: bold;
   text-align: left;

}

h4{
   font-size: 120%;
   color: #2d1d06;
   font-weight: normal;
   text-align: center;

}

h5{
   font-size: 110%;
   color: #7d890d; 
   width: 70px;
   margin-bottom: 0px;
   margin-top: 0px;
   font-weight: bold;
   text-align: left;

}

/* Table styling */

table {
    border: 1px;
    border-collapse:collapse;
    width: 90%;
    margin-left: 25px;
    margin-right: 25px;
    font-size: 90%;

}

th {
    background-color: #000;
    color: #FFF;
}

td {
    padding: 2px 4px;
    padding-top: 25px;

    text-align: left;
    border-bottom: 0px;
}


/*contact page*/

fieldset
{
  margin: 10px 25px;
  padding: 5px 10px;
  border: 1px solid #3697B5;
  background:#fff;
  text-align: center;
}

legend
{
  font-size: 80%;
  color: #000; background: #fff;
  font-weight:bold;
  margin-left: 25px;
} 



label
{
  float: left;  /* labels and input fields line up horizontally */
  width: 200px; 
  margin-left: 25px;    
  text-align: center; 
}

textarea
{

  margin-left: 25px;
}

我的.js文件:

//contact.js - this will dipaly all contact detials on the home page and contact us page//

var Addre = new Array("7945", "Town Plaza", "Vancouver", "E5T 4J9","Canada");
var phoneNo = new Array("1-604-568-4938", "Toll free: 1-888-987-4738");
var eMail = new Array("info@armchairbook.com");

// get the HTML div element
var elem = document.getElementById("contact_details");

// display Address
elem.innerHTML ="Address: <br />";
for (var i = 0; i < Addre.length; i++)
{
   if ( i > 0)
      elem.innerHTML += ", ";
   elem.innerHTML +=  Addre[i];
}

// display Phone no

elem.innerHTML += "<br /><br />Contact No:<br /> ";
for (var i = 0; i < phoneNo.length; i++)
{
   if ( i > 0)
      elem.innerHTML += " or ";
   elem.innerHTML +=  phoneNo[i];
}

// display Email

elem.innerHTML +=  "<br /><br />Email:<br /> ";
for (var i = 0; i < eMail.length; i++)
{
   if ( i > 0)
      elem.innerHTML += ", ";
   elem.innerHTML +=  eMail[i];
}
4

1 回答 1

1

只需text-align: center;在您的 CSS 中设置 ,#contact_details您要将联系信息附加到的元素:

#contact_details {
  text-align: center;
}

有关使用您的代码的工作演示,请参阅此 JS Bin

在 'text-align' CSS 属性上引用Mozilla 的开发者网络页面:

text-align CSS 属性描述了像文本这样的内联内容如何在其父块元素中对齐。text-align 不控制块元素本身的对齐方式,只控制它们的内联内容。

初始值:开始,或者一个无名值,如果方向是 ltr,则作为左,如果方向是 rtl,如果浏览器不支持,则作为右。

于 2012-10-08T00:25:27.450 回答