常见问题解答页面的对齐问题和答案

时间：2014-04-03 21:22:36

标签： html css alignment

我尝试在常见问题页面上进行对齐。但我面临一个问题，我的问题和答案也在中心对齐，但我希望标题位于中心，所有内容都要在中心对齐，而不是文本。

the problem

我希望它看起来像这样

enter image description here

HTML： 

<html>
  <head>
  <meta name="keywords" content="Photos, Images, Designs, HD, Tutorials, Photoshop, Download, Free, Upload, Gallery">
  <meta name="description" content="Free HD Photos and Free tutorials For Photoshop and Designs.">

  <meta charset="UTF-8">
    <title>FAQ</title>
    <link rel="shortcut icon" href="Images/Icon.ico"> 
    <link href='Css/Style2.css' rel='stylesheet' type='text/css'>   
  </head>

  <body>
   <div id="header">
<a href="Home.html"><img src="Images/Logo.png" alt="Logo"/></a>
 <div id="menu">
 <ul>
 <li><a href="Home.html"><img class="nav-icons" src="Images/Nav-icons/home.png" alt="home" /> Home</a></li>
 <li><a href="Tutorials.html"><img class="nav-icons" src="Images/Nav-icons/tutorials.png" alt="tutorials" /> Tutorials</a></li>
 <li><a href="Gallery.html"><img class="nav-icons" src="Images/Nav-icons/gallery.png" alt="gallery" /> Gallery</a></li>
 <li class="active"><a href="FAQ.html"><img class="nav-icons" src="Images/Nav-icons/faq.png" alt="faq" /> FAQ</a></li>
 <li><a href="Contact.html"><img class="nav-icons" src="Images/Nav-icons/contact.png" alt="contact" /> Contact Us</a></li>
 <li><a href="About.html"><img class="nav-icons" src="Images/Nav-icons/about.png" alt="about" /> About Us</a></li>
 <li><a href="Signup.html"><img class="nav-icons" src="Images/Nav-icons/user.png" alt="sign up" /> Sign Up</a></li>
 <li><a href="Login.html"><img class="nav-icons" src="Images/Nav-icons/login.png" alt="login" /> Login</a></li>
 </ul>
 </div>
 </div>


<div id="line"></div>
    <br> 

        <div id="content">
            <h1>FAQ</h1>
            <img src="Images/faq.jpg" alt="FAQ" />
            <dl> 
            <dt>What is Creative Designs about ?</dt>
            <dd>Creative Designs is a website specialising in Photography and Designs. It offers people a look at creative Photos and Designs.</dd>


            <dt>How much does it cost to register on Creative Designs ?</dt>
            <dd>It's totally free.</dd>


            <dt>Who can see the photos I upload ?</dt>
            <dd>Any one can see your photos because its public by default you can share it on Facebook or any social website.</dd>


            <dt>Where did the idea come from ?</dt>
            <dd>We all want our memories to be immortal we love to show our sons and grandsons in the future our beautiful memories so we made this website to make it possible.</dd>


            <dt>Where does the name came from ?</dt>
            <dd>As humans we like imagining beautiful things, We Love Creativity that nature always provides in its landscapes, so Its Creative Designs</dd>


            <dt>How Can I make an Advertisement on Creative Designs ?</dt>
            <dd>For all advertising enquiries, please email <a href="mailto:Advertising@CreativeDesigns.com">Advertising@CreativeDesigns.com</a></dd>


            <dt>How to report a technical Issue On Creative Designs ?</dt>
            <dd>For technical issues, please email <a href="mailto:Support@CreativeDesigns.com">Support@CreativeDesigns.com</a></dd>

            <dt>How to contact Creative Designs ?</dt>
            <dd>You can go to the <a href="Contact.html">Contact Us</a> Page</dd>

        </dl>
    </div>

        <br>
        <br>

<div id="line"></div>


<div id="footers">
  <div id="footer">
 <div id="footerbox">
 <header>Keep In Touch</header>
<p>
Please keep in touch with us and follow our social networks to keep updated about everything.
</p>
<a href="https://www.facebook.com/" target="_blank"><img class="Social" src="Images/facebook500.png" alt="Facebook" /></a>
&nbsp;
<a href="https://twitter.com" target="_blank"><img class="Social" src="Images/twitter.png" alt="Twitter" /></a>
&nbsp;
<a href="http://instagram.com/" target="_blank"><img class="Social" src="Images/instagram.png" alt="Instagram" /></a>
&nbsp;
<a href="http://www.behance.net/" target="_blank"><img class="Social" src="Images/behance.png" alt="Behance" /></a>
 </div>

  <div id="footerbox2">

 <header>Navigate</header>
 <br>
    <a href="Home.html">Home</a> &nbsp; <a href="Tutorials.html">Tutorials</a> <br><br>
    <a href="Gallery.html">Gallery</a> &nbsp; <a href="FAQ.html">FAQ</a> <br><br>
    <a href="Contact.html">Contact Us</a> &nbsp; <a href="About.html">About Us</a>

 </div>

 <div id="footerbox3">

 <header>Subscribe</header>
    <br>
    Subscribe to our newsletter. If you are interested just put your Email address here.
    <br>

    <br>
    <input type="text" size="30" placeholder="E-mail address"/> <a class="go" href="#">Go</a>
    <br>
 </div>

 </div>

</div>

<div id="copyright">
  <p>Copyright &copy; 2014. Creative Designs all rights reserved. <a class="imp" href="Terms.html">Terms of Use</a>.</p>
</div>

  </body>
</html>

CSS： 

body {
background-color: #ccc;
 margin: 0px;
font-family:  Helvetica, sans-serif;
 font-size: 13px;
}

a{
text-decoration: none;
}

input{
-webkit-border-radius: 5px;
padding: 4px 7px;
border-color: #3fb8e8;
}

.imp{
font-weight:bold;
text-decoration: underline;
}


textarea{
-webkit-border-radius: 6px;
padding: 4px 7px;
border-color: #3fb8e8;
}

iframe{
width:560px;
height:315px;
border: 0px;
}

.ex{
color: #3fb8e8;
}

.gallery{
padding:0px 190px;
}

.gallery td { 
    padding: 30px;
    text-align: left;
    font-size: 15px;
    font-weight: bold;
}

.gallery img{
width:250px;
height:250px;
border:3px solid #000000;
}

.gallery .download{
width:95px;
height:30px;
border:0px;
}

.tutorials{
padding:0px 200px;
}

.tutorials td { 
    padding: 5px;
    text-align: left;
    font-size: 15px;
    font-weight: bold;
}

.tutorials img{
width:100px;
height:80px;
border:2px solid #000000;
}


dl dt{
font-size: 17px;
font-weight: bold;
}
dl dd{
height: 50px;
font-size: 15px;
}

.gallery .top{
text-align: center;
}
.tutorials .top{
text-align: center;
}

#header
{
 overflow: hidden;
 background: #3b3b3b;
}

.nav-icons{
width: 15px;
height: 15px;
}

.login{
    width: 50px;
    position: absolute;
    top: 118px;
    right: 10px;
    padding: 9px 20px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor:pointer;
    font-family:  Helvetica, sans-serif;
    text-decoration: none;
    background-color: #3fb8e8;
}

.login:hover {
    background-color: #1baae3;
}

#menu
{
 float: right;
 width: 1250px;
}

.dl{
 padding: 0px 0px 0px 50px;
}

.dl .title{
font-weight: bold;
font-size: 16px;
}

.dl .comp{
text-align: justify;
font-size: 16px;
padding: 0px 170px 0px 0px;
}

#menu ul
{
 margin: 0px;
 padding: 20px 0px 0px 0px;
 list-style: none;
}


#menu li
{
 float: left;
 margin-left: 10px;
}

#menu a
{
 padding: 15px 30px;
 letter-spacing: 2px;
 text-decoration: none;
 text-transform: uppercase;
 font-family: 'Archivo Narrow', sans-serif;
 font-size: 12px;
 font-weight: 600;
 color: #FFFFFF;
}


#menu .active a
{
 background: #3fb8e8;
 border-radius: 5px;
 color: #FFFFFF;
}

#menu .active a:hover
 {
 background-color: #1baae3;
 }

#line
{
padding: 12px 0px 1px 0px;
background: #3fb8e8;
}

#contents{
text-align: center;
}

#contents .about{
font-weight: bold;
font-size: 16px;
text-align: left;
padding-left: 380px;
}

#contents .about2{
font-size: 15px;
text-align: left;
padding-left: 380px;
}

#contents .terms{
font-size: 17px;
text-align: justify;
padding-left: 380px;
padding-right: 220px;
}

#content {
    width: 600px;
    padding: 0 300px;
    margin: 0 auto;
}

#content h1 {
    text-align: center;
}

.signup{
padding: 0px 0px 0px 440px;
}

#why{
    bottom: 70px;
    left: 50px;
    width: 300px;
    height: 300px;
    -webkit-border-radius: 5px;
    position: absolute;
    padding: 10px 26px;
    font-size: 14px;
    text-align: left;
    font-weight: bold;
    color: #fff;
    font-family:  Helvetica, sans-serif;
    background-color: #3b3b3b;
}
.why a:visited{
color: #3bc;
}

#alter{
    bottom: 70px;
    right: 50px;
    width: 300px;
    height: 300px;
    z-index: -1;
    -webkit-border-radius: 5px;
    position: absolute;
    padding: 10px 26px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-family:  Helvetica, sans-serif;
    background-color: #3b3b3b;
}

#alter2{
    bottom: 200px;
    right: 50px;
    width: 300px;
    height: 200px;
    z-index: -1;
    -webkit-border-radius: 5px;
    position: absolute;
    padding: 10px 26px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-family:  Helvetica, sans-serif;
    background-color: #3b3b3b;
}

#alter3{
    bottom: 200px;
    left: 50px;
    width: 300px;
    height: 200px;
    z-index: -1;
    -webkit-border-radius: 5px;
    position: absolute;
    padding: 10px 26px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-family:  Helvetica, sans-serif;
    background-color: #3b3b3b;
}

#down{
position: relative;
padding: 0px 23px 10px 70px;
}

.Facebookbtn{
    bottom: 250px;
    right: 100px;
    width: 200px;
    position: absolute;
    padding: 10px 26px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor:pointer;
    font-family:  Helvetica, sans-serif;
    background-color: #3b5998;
}
.Facebookbtn:hover{
background-color: #8b9dc3;
}

.Twitterbtn{
    bottom: 200px;
    right: 100px;
    width: 200px;
    position: absolute;
    padding: 10px 26px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor:pointer;
    font-family:  Helvetica, sans-serif;
    background-color: #3cf;
}
.Twitterbtn:hover{
background-color: #0084b4;
}

.Googlebtn{
    bottom: 150px;
    right: 100px;
    width: 200px;
    position: absolute;
    padding: 10px 26px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor:pointer;
    font-family:  Helvetica, sans-serif;
    background-color: #dc4b38;
}
.Googlebtn:hover{
background-color: #c83e2e;
}

.Facebookbtn2{
    bottom: 350px;
    right: 100px;
    width: 200px;
    position: absolute;
    padding: 10px 26px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor:pointer;
    font-family:  Helvetica, sans-serif;
    background-color: #3b5998;
}
.Facebookbtn2:hover{
background-color: #8b9dc3;
}

.Twitterbtn2{
    bottom: 290px;
    right: 100px;
    width: 200px;
    position: absolute;
    padding: 10px 26px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor:pointer;
    font-family:  Helvetica, sans-serif;
    background-color: #3cf;
}
.Twitterbtn2:hover{
background-color: #0084b4;
}

.Googlebtn2{
    bottom: 230px;
    right: 100px;
    width: 200px;
    position: absolute;
    padding: 10px 26px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor:pointer;
    font-family:  Helvetica, sans-serif;
    background-color: #dc4b38;
}
.Googlebtn2:hover{
background-color: #c83e2e;
}

#contact{
padding: 0px 110px 0px 0px;
}

.label {
    display: inline-block;
    width:120px;
    text-align: right;
    padding: 10px;
    font-weight:bold;
}


.send{
    width: 150px;
    left: 590px;
    padding: 10px 26px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor:pointer;
    font-family:  Helvetica, sans-serif;
    background-color: #3fb8e8;
}

.now{
    width: 150px;
    left: 125px;
    bottom: 230px;
    position: absolute;
    padding: 10px 26px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    cursor:pointer;
    font-family:  Helvetica, sans-serif;
    background-color: #3fb8e8;
}

.now:hover {
    background-color: #1baae3;
}

.Social {
 height: 40px;
 width: 40px;
}

.Social:hover {
  -webkit-filter: grayscale(100%);
}

.send:hover {
    background-color: #1baae3;
}

#footers
{
height: 120px;
padding: 35px 0px 35px 0px;
background: #444444;
}

#footer
{
height: 200px;
color: #B1B1B1;
}

#footer header
{
margin-bottom: 2px;
font-size: 20px;
font-weight: 400;
color: #FFFFFF;
}

#footer #footerbox
{
position: relative;
left: 520px;
width: 300px;
}

#footerbox2 header
{
margin-bottom: 2px;
font-size: 20px;
font-weight: 400;
color: #FFFFFF;
}

#footerbox2
{
color: #B1B1B1;
position: relative;
left: 60px;
bottom: 130px;
width: 300px;
}

#footerbox2 a:visited
{
color:#B1B1B1;
}

#footerbox2 a:active
{
color:#B1B1B1;
}

#footerbox2 a
{
color:#B1B1B1;
}

#footerbox3
{
color: #B1B1B1;
position: relative;
left: 970px;
bottom: 250px;
width: 300px;
}

#footerbox3 header
{
margin-bottom: 2px;
font-size: 20px;
font-weight: 400;
color: #FFFFFF;
}

.go {
    width: 20px;
    position: absolute;
    bottom: 2px;
    padding: 6px 20px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    color: #fff;
    border-radius: 3px;
    font-family: Helvetica, sans-serif;
    text-decoration: none;
    background-color: #3fb8e8;
}

.go:hover {
    background-color: #1baae3;
}

#copyright
{
text-align: center;
color: #606060;
}

3 个答案:

答案 0 :(得分：0)

＆＃34; FAQ＆＃34;应该坐在一个块容器（如div）中，并且有一个样式=＆＃34; text-align：center;＆＃34;在它上面。

问题和答案应该放在一个单独的容器中，样式=＆＃34; text-align：left;＆＃34;在里面。

您可以将答案放在div中，样式为=＆＃34; padding-left：20px＆＃34;左右。

从包含常见问题解答的div中删除align = center 

<div align="center">

我已经更新了你的小提琴：http://jsfiddle.net/jzxe3/

答案 1 :(得分：0)

align="center"已弃用。你应该把它切换成一个类或ID。

我已根据更改更新了JSFiddle，并在最后添加了2行CSS。

.content {
    padding: 0 20px;
}
.content h1 {
    text-align: center;
}

包含div的属性已从align="center"更改为class="content"。 上面的附加CSS通过 20px 向左侧和右侧的div容器添加了填充，并使用h1将div置于text-align: center内。

答案 2 :(得分：0)

我们假设您将页面标题包含在<h1>标记中，将您的问题包装在<h2>标记中，将答案包装在<p>标记中，如下面的HTML代码段所示：

<h1>FAQ</h1>

<h2>Question</h2>
<p>Answer to the question.</p>

这些都是块级元素，您可以使用类似下面的CSS来实现所需的格式：

h1 { text-align: center; }
h2 { text-align: left; }
p { margin-left: 2ex; }

当然，您可以将<div>用于类而不是标题和段落元素。

相关问题
最新问题