Div中的元素不会居中

Question

我一直试图使div中的元素居中，但无济于事。请告诉我我哪里做错了。下面是我的html和css代码：

<div class="one-column-960">
        <div class="about1"><a name="about"></a>
                <ul>
                    <li>
                        <img src="img/team-2.png" alt="" />
                        <h3>Jose Togbe</h3>
                        <p class="job-role">Information Architect/ UX Designer</p>
                        <p>Entrepreneur and CEO of Planmesh by day, information architect and UX designer by night. Jose has worked with various agencies including Oho interactive, O2KL, Revsquare, and ICC Lowe.</p> 
                    </li>
                </ul>   
        </div>      
    </div><!-- close about us header -->

CSS：

.one-column-960{
    width: 100%;
    position: relative;
    margin: 0 auto;
    text-align: center; 
}

.about1 ul li {
    width: 300px;
    display: inline-block;
    margin: 0 40px;
    padding: 0 20px;
    position: absolute;
}

提前感谢！

Answer 1

CSS

.one-column-960{
    width: 100%;
    position: relative;
    margin: 0 auto;
    text-align: center; 
}

.about1 ul li {
    width: 300px;
    display: inline-block;
    margin: 0 40px;
    padding: 0 20px;
    /*position: absolute;*/
}

Live Demo

Answer 2

您所需要做的就是从.about1 ul li{}类中删除position: absolute;。

Answer 3

我从你的css中删除了一些东西，但结果如下：

.one-column-960{
    width: 100%;
}

.about1 ul
{
    width:300px;
    margin:0px auto;
    display:block;
}

.about1 ul li {
    margin: 0 40px;
    padding: 0 20px;
}