Question

我试图将两个元素放在给定空间的中心，而不管页面的大小。

<div id="parent">
    <div class="child right">
    I am a child.    
    </div>
    <div class="child left">
    I am a child.
    </div>
</div>

.child {
    background-color: #ff0000;
    height: 20px;
    width: 100px;
    max-width: 50%;
}
.right {
    float: right;
    margin-right: 75px;
}
.left {
    float: left;
    margin-left: 75px;
}
#parent {
    background-color: #00FF00; 
    height: 20px;
    padding: 20px 0;
    width: 500px;
}

在示例中，＃parent div设置为500px，其他的基于此边距。通常父母将是100％宽度。这只是我想要的一个例子。有没有办法在CSS中使用calc或其他东西，以便页面大小改变，边距会根据每个孩子100px的面部而改变或消失。

Answer 1

让孩子的容器50％

.child {
    height: 20px;
    width: 50%;
    float:left;
    text-align:center;
}

.child span {
  background-color: #ff0000;
}

https://jsfiddle.net/foreyez/xqvffyqj/

Answer 2

您可以使用flexbox：

.child {
    background-color: #ff0000;
    height: 20px;
    width: 100px;
    max-width: 50%;
}
#parent {
    background-color: #00FF00;
    height: 20px;
    padding: 20px 0;
    display: flex;
    justify-content: space-around;
    width: 500px;
}

<div id="parent">
    <div class="child right">
        I am a child.
    </div>
    <div class="child left">
        I am a child.
    </div>
</div>

Answer 3

只需将margin更改为15％而不是75px，即75px / 500px：

.right {
    float: right;
    margin-right: 15%;
}
.left {
    float: left;
    margin-left: 15%;
}

Here is a working example

Answer 4

＆＃13;

.child-holder {
	width: 50%;
    float: left;
}
.child {
    background-color: #ff0000;
    height: 20px;
    width: 100px;
    margin: auto;
    max-width: 100%;
}
#parent {
    background-color: #00FF00; 
    height: 20px;
    padding: 20px 0;
    width: 100%;
}

＆＃13;

<div id="parent">
	<div class="child-holder">
        <div class="child">
            I am a child.    
        </div>
	</div>
    <div class="child-holder">
        <div class="child">
            I am a child.    
        </div>
	</div>
</div>

＆＃13;

在发布此内容之前，我尝试删除该问题，因为没有给出的答案处理响应式设计要求。因此，给予父母需要100％，你可以制作2个宽度为50％的盒子，孩子的自动边距将允许孩子在各自的空间内居中，无论父母或页面的大小如何。

Answer 5

这是两个简单的变体，第一个具有固定宽度和左/右边距（使用样本固定宽度），第二个具有流体并向左/右平移。

2元素的中间值为33％，然后以66％的宽度减少。

如果一个人希望他们以25％为中心，只需改为25％并以50％减少。

代码段固定宽度

.child {
    background-color: #ff0000;
    height: 20px;
    width: 100px;
    max-width: 50%;
}
.left {
    float: left;
    margin-left: calc(33.3% - 66.6px);
}
.right {
    float: right;
    margin-right: calc(33.3% - 66.6px);
}
#parent {
    background-color: #00FF00; 
    height: 20px;
    padding: 20px 0;
    width: 500px;
}

<div id="parent">
    <div class="child right">
    I am a child.    
    </div>
    <div class="child left">
    I am a child.
    </div>
</div>

代码段流体宽度

.child {
    background-color: #ff0000;
    height: 20px;
    width: 100px;
    max-width: 50%;
}
.left {
    float: left;
    position: relative;
    left: 33.3%;
    transform: translateX(-66.6666%);
}
.right {
    float: right;
    position: relative;
    right: 33.3%;
    transform: translateX(66.6666%);
}
#parent {
    background-color: #00FF00; 
    height: 20px;
    padding: 20px 0;
    width: 100%;
    min-width: 200px;
}

<div id="parent">
    <div class="child right">
    I am a child.    
    </div>
    <div class="child left">
    I am a child.
    </div>
</div>

响应式设计两个元素之间的自动边距

5 个答案: