Question

我有以下HTML：

<div class="col span_1_of_3 setCenter">
<div id="divEachImageExt">
    <div id="divEachImage">
        <div id="slides">
            <div class="inta"><img src="theImages/imcpsite.png" width="140" height="140" alt="side" /></div>
        </div>
        <div id="menu">
            <ul class="ulText">
                <li class="menuItem act">PS: BASICS</li>
            </ul>
        </div>
    </div>
</div>
</div>

CSS：

.col {
    /*display: block;*/
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}
.span_1_of_3 {
    width: 32.2%;
}
.setCenter {
    text-align: center;
}
#divEachImageExt {
    float: left;
    width: 30%;
    margin: 0 auto;
}
#divEachImage {
    /* CSS3 Box Shadow */
    -moz-box-shadow:0 0 3px #AAAAAA;
    -webkit-box-shadow:0 0 3px #AAAAAA;
    box-shadow:0 0 3px #AAAAAA;

    /* CSS3 Rounded Corners */

    -moz-border-radius-bottomleft:4px;
    -webkit-border-bottom-left-radius:4px;
    border-bottom-left-radius:4px;

    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px;
    border-bottom-right-radius:4px;

    border:1px solid white;

    background:url('../theImages/panel.jpg') repeat-x bottom center #FFFFFF;

    /* The width of the divEachImage */
    width:175px;
    overflow:hidden;
    margin: 0 auto;
}

#slides {
    /* This is the slide area */
    height:155px;

    /* jQuery changes the width later on to the sum of the widths of all the slides. */
    width:175px;
    overflow:hidden;
    margin: 0 auto;
}

.inta {
    float:left;
    width: 175px;
    margin: 0 auto;
    height: 140px;
    padding-top: 8px;
}

#menu {
    /* This is the container for the thumbnails */
    height:45px;
}

ul.ulText {
    margin:0px;
    padding:0px;
}

ul.ulText li {
    /* Every thumbnail is a li element */
    width:125px;
    display:inline-block;
    list-style:none;
    height:45px;
    overflow:hidden;
    line-height: 45px;
    vertical-align: middle;
}

li.inact:hover {
    /* The inactive state, highlighted on mouse over */
    background:url('../theImages/pic_bg.png') repeat;
}
li.act a {
    cursor:default;
}
ul.ulText li a {
    display:block;
    background:url('../theImages/divider.png') no-repeat right;
    height:35px;
    padding-top:10px;
}

发生的事情是，内部DIV左对齐而不是居中。

这是F12开发工具截图：

enter image description here

Answer 1

将display: inline-block添加到您想要居中的元素。

继承你的小提琴：http://jsfiddle.net/u26wqssb/

以下是代码：

示例HTML：

<div class="setCenter">
    <div class="centerMe"></div>
</div>

和CSS：

.setCenter {
    width:100%;
    text-align:center;
    background: #eee;
}

.centerMe {
    width:100px;
    height:100px;
    background:red;
    display:inline-block;
}

如果您为您的案例添加小提琴，我们可以在那里修复它。

Answer 2

嘿，您可以尝试使用边距将其置于中心位置

.yourstyle {
 margin:0 auto; /* shorthand or margin-left:auto; margin-right:auto; for long way */ 
}

或者您可以尝试使用CSS3 2D变换来居中它或只是Flex盒好运

Answer 3

在#divEachImageExt中有浮动的原因吗？如果没有，那么

/* .setCenter part not needed */
#divEachImageExt {
    width: 30%;
    margin: 0 auto;
}

或

.setCenter {
    text-align: center;
}
#divEachImageExt {
    display: inline-block;
    width: 30%;
}

会做的。

Answer 4

将#divEachImageExt更改为以下代码

#divEachImageExt {
    width: 30%;
    margin: 0 auto;
}

删除float：left

它将解决您的问题。

如何将DIV置于另一个父DIV中

4 个答案: