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

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

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;
}

Answer 4

使用此css属性：

.about1 ul li {

宽度：300px;

保证金：自动;

}

Answer 5

您只需在代码html

中执行以下操作即可

<div class="one-column-960">
    <div class="about1" ALIGN=CENTER><a name="about"></a>
        <ul>
            <li>
                <img src="photo.jpg" 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

Div中的元素不会居中

5 个答案: