Question

我需要在上面对齐消息文本 textarea也到了哪里我可以在提交按钮下获得良好的保证金。

  <!DOCTYPE html>
  <html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Tampa Bay Buccaneers Fan Page</title>
  <meta name="author" content="Ben Smith">
  <meta name="description" content="introduction to HTML">
  <meta name="keywords" content="html, eclasses, website builder">
  <link href='http://fonts.googleapis.com/css?family=Pirata+One' 
  rel='stylesheet'    type='text/css' >
  <link rel="stylesheet" type="text/css" href="/final5.css">
  </head>
  <body>


  <p id="text" class="Three-Dee">Tampa Bay Buccaneers Fan Page</p>
   <br><br>   <br>

   <div class="file">
   <ul>
            <li><a   href="http://bsmithpci.accountsupport.com/final1.html">
   Home</a>
   </li>
    <li><a href="http://bsmithpci.accountsupport.com/final2.html">
    Image Gallery</a></li>
    <li><a href="http://bsmithpci.accountsupport.com/final3.html">
     Schedule</a></li>
            <li><a href="http://bsmithpci.accountsupport.com/final5.html">
    Fan Club</a></li>

    <li><a href="http://bsmithpci.accountsupport.com/final4.html">
      Contact Us</a></li>
 </ul>
 </div>


 <h1>Buccaneers Fan Club</h1><br><br>


 <form class="form">

 <h3>Contact Us Matey</h3><br>


 <p class="name"> 
    <label for="name">Name</label>
    <input type="text" name="name" id="name" /> 

</p> 

    <p class="email"> 
    <label for="email">Name</label>
    <input type="text" name="email" id="email" /> 

</p> 

<p class="subject"> 
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" /> 

</p> 
<p class="text"> 
    <label for="message">Message</label>
    <textarea name="text"></textarea> 

</p> 
 <p class="submit"> 
    <input type="submit" value="Send" /> 
</p> 
 </form>


  </body>
   </html>

这里是我拥有的css我知道我需要清理p.class 同样我可以将它们全部对齐1

p.name {
   text-align:center;
}

p.email {
   text-align:center;
}

p.subject {
    text-align:center;
}

p.message {
    text-align:center;
}

p.address {
    text-align:center;
}

p.city {
    text-align:center;
}

p.state {
    text-align:center;
}

p.zip {
     text-align:center;
}
input, textarea { 

   margin: auto;
   padding: 9px; 
   display: block;
    border: solid 1px #E5E5E5; 
   outline: 0; 
   font: normal 13px/100% Verdana, Tahoma, sans-serif; 
   width: 200px; 
   background: #FFFFFF url('bg_form.png') left top repeat-x; 
   background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF),
   color-stop(4%, #EEEEEE), 
   to(#FFFFFF)); 
   background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, 
    #FFFFFF 25px); 
   box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
   -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
   -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
 } 

 textarea { 
   width: 400px; 
   max-width: 400px; 
   height: 150px; 
   line-height: 150%; 
  } 

  input:hover, textarea:hover, 
   input:focus, textarea:focus { 
     border-color: #C9C9C9; 
     -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
  } 

  .form label { 
    margin-left: 10px; 
    color: #999999; 
} 

 .submit input { 
   width: auto; 
   padding: 9px 15px; 
   background: #617798; 
   border: 0; 
   font-size: 14px; 
   color: #FFFFFF; 
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px; 
}

FIDDLE HERE

Answer 1

您可以简单地添加：

p.text {
    text-align: center;
}

这是一个小提琴：JSFiddle

但我建议您使用更多更好的代码来直接使用：

form p {
   text-align: center;
}

那你就不会有这么多的CSS选择器。那就是这个小提琴：JSFiddle

我需要让消息文本在textarea上面对齐

1 个答案: