Question

这可能是一个愚蠢的问题，但我似乎无法弄清楚如何自动居中我的部分

现场演示：http://iam.colum.edu/students/jordan.max/algorerhythm/index.html#

我试图添加

margin: 0 auto;

到我的div＃内容，没有运气。

我能够让它居中的唯一方法是手动输入

margin-left: xxpx

但我希望它根据其中的内容集中。有什么想法吗？提前致谢。

其他CSS

body
{
    background: #C1CDC1;
}

h1
{
}

h2
{
    margin-top: -40px;
    margin-left: 120px;

}

h1.mainT
{
    width: 590px;
    font-family: 'Montserrat', sans-serif;
    margin-left: 10px;
    font-size: 2.5em;
}

h2.subT
{
    width: 130px;
    font-family: 'Open Sans Condensed', sans-serif;
}

h3 
{
    display: inline-block;
    font-family: 'Open Sans Condensed', sans-serif;
}

footer
{
    color: #FCFCFC;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: .85em;
}

section#nav
{
    width: auto;
    margin-left: 550px;
    margin-top: -80px;
    padding: 5px;
    word-spacing: 80px;

}

div#navContainer
{
    height: 100px;
    background: #FCFCFC; /* grey99*/
    box-shadow: 2px 3px 5px #333;

}

div#content
{
    height: 100px;
    width: auto;
    background: #FCFCFC; /* grey99*/
    box-shadow: 2px 3px 5px #333;
    display: inline-block;

}
section#contentContainer
{
    float: none;
    padding-top: 20px;
    margin: 0 auto;
}

HTML

<script>
$(document).ready(function () {
        $('section#contentContainer').hide();
        var $as = $('a.contentDown').click(function () {
            //show back button, move it from left +300
            $('section').show();
         }); //closes click for contentDown
    }); //closes ready
</script>

</head>

    <body>
    <div id="navContainer">
            <h1 class="mainT"> Al Gore Rhythm Labs </h1>
            <h2 class="subT"> Chicago, IL </h2>


        <section id="nav">
                <h3><a href="#" class="contentDown"> Assignments </a></h3>
                <h3><a href="#" class="contentDown"> Writings </a></h3>
                <h3><a href="#" class="contentDown"> Presentations </a></h3>
        </section>
    </div>


    <section id="contentContainer">
        <div id="content">
        <p> hello motto
        </p>
        </div>
    </section>

    </body>

    <footer> 
    <p> Jordan Max 2014</p>
    </footer>
</html>

Answer 1

也许这就是解决方案（不要忘记删除style =＆＃34; display：none;＆＃34;对于你的＃contentContainer部分）

结果： enter image description here 添加文字对齐中心;到你的＃contentContainer

部分

 section#contentContainer 
 {
 float: none;
 padding-top: 20px;
 margin: 0 auto;
 text-align: center;
 }

祝你好运!!

Answer 2

在您的section元素中添加'align =“center”'。如下：

<section id="contentContainer" align="center">

这不是首选的方法，但如果你只想在CSS中做，你需要在元素上做'text-align：center'来居中对齐它的内部'inline-block'元素。

CSS: text-align: center

难以集中我的节元素

2 个答案: