CSS 获取文章中心 [英] CSS Getting The Article Center

查看:18
本文介绍了CSS 获取文章中心的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的目标是将文章放在 leftnav 和 rightnav 的中间.我目前的语法允许 leftnav 和一边粉碎"到另一个.我已经在我的文章中添加了 margin-left 和 padding left,但这似乎不起作用.如何在不砸"到左侧导航中的情况下将文章置于页面中央?谢谢大家.

My goal is to get the article in the middle of the leftnav and rightnav. My current syntax is allowing for the leftnav and aside to "smash" into one another. I've added the margin-left and padding left to my article and that does not seem to work. How would I get the article in the center of the page without "smashing" into the leftnav? Thanks everyone.

CSS

/* CSS Document */

body{
 background-color:#9F6;
}

section{
 width:960px;
 /*padding:15px;*/
}

header{
 height:150px;
 outline:#000 dotted;
}

nav{
 position:relative;
 outline:#000 dotted;
}

nav ul{
 padding:15px;
}

nav ul li{
 /* Moves the nav in a horizontal fashion */    
 display:inline;
}

nav ul li a{
 list-style-type:none;
 text-decoration:none;
 text-transform:capitalize;
 padding:15px;
}

nav ul li a:hover{
 background-color:#F00;
 color:#0FF;
}

#leftnav{
 float:left;    
 width:160px;
 outline:#000 dotted:
 /*margin-right:15px; */
 /*padding:15px;*/
 /*padding-right:2cm;*/
}

#rightnav{
 float:right;   
 width:160px;
 outline:#000 dotted:
}

aside, article{
 min-height: 550px;
 /*background-color: #F96;*/
 outline:#000 dotted;
 /*padding: 1px;*/
}   

article{
 width:750px;
 /*margin-left:15px;*/
 /*padding-left:65px;*/
}

footer{
 width:960px;
 outline:#000 dotted;
 margin-top:15px;
 text-align:center;
}

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="another-css.css">
<title>Another Test</title>
</head>

<body>
    <section>
        <header>
         <h3>This Is The Header</h3>
        </header>

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Cars</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </nav>

        <aside id="leftnav">
        aside left
        </aside>

        <aside id="rightnav">
        aside right
        </aside>

        <article>
        article
        </article>

        <footer>
        Copyright 2013
        </footer>

    </section>
</body>

</html>

推荐答案

margin-left: auto;
margin-right: auto;

你有没有试过在文章中使用上面的代码

Have you tried to use the above code on the article

这篇关于CSS 获取文章中心的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆