css - 基本 CSS 问题 - 父 DIV 与未知子 DIVS,居中父 DIV

标签 css

当我将 DIV 居中时,我会给它一个宽度并在其上放置 margin:auto,但是在这种情况下我有两个问题。

  1. 在这个父 DIV 中将有 2 个或 3 个 DIVS,它们上面有 float:left。子 DIVS 的宽度不会改变,但数字可能会改变(2 或 3)。

  2. 这意味着我无法在不知道内部 DIV 数量的情况下在父 DIV 上设置宽度。

示例标记:

<div class="parent">
 <div class="child"></div>
 <div class="child"></div>
</div>

<div class="parent">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
</div>

总而言之,我需要让父 DIV 居中,内部的 DIV 向左浮动。

最佳答案

参见: http://jsfiddle.net/qk4dW/

.wrapper {
    text-align:center;
}
.parent,.child {
    display:inline-block;
}

<div class="wrapper">
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</div>

它应该可以工作。

关于css - 基本 CSS 问题 - 父 DIV 与未知子 DIVS,居中父 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7159085/

相关文章:

javascript - 尝试将 CSS 中的链接与顶部标题居中但不会移动

html - 父div容器隐藏下拉菜单

css - 防止div拉伸(stretch)?

html - 无法连续添加响应式 flexbox

html - 在表格中,TD 标签宽度在 HTML 中没有正确对齐?

css - 如何在响应式网页中指定最小字体大小

css - 如何将多个字体添加到单独的标签中?

javascript - .slider::-webkit-slider-thumb 在 javascript 中需要

基于 jQuery 的 div 类检查和 CSS 编辑

css - <table> 元素在现代浏览器中的一致定位