使用百分比宽度将两个 div 并排中心对齐到页面答案

【问题标题】：Aligning two divs side by side center to page using percentage width使用百分比宽度将两个 div 并排中心对齐到页面
【发布时间】：2014-02-24 19:11:15
【问题描述】：

请参考以下代码

<div id="root">
<div id="child1">xxxx</div>
<div id="child2">yyyy</div>
</div>

css：

#root
{
    width:100%
    margin:0 auto;
}
#root div
{
    width: 50%;
    float:left; 
    border: 1px solid red;
}

小提琴：

http://jsfiddle.net/33Fzu/133/

我知道我们可以使用“像素”将 div 中心与页面对齐。但我想通过百分比宽度概念来做到这一点。

如何通过需要在 IE8、IE9 和 chorme 浏览器中以各种分辨率工作的百分比宽度概念对齐 div。

如果我将根宽度设置为 80% 或 90%，那么对于特定分辨率的机器，div 居中，但其他分辨率不起作用。

如何以百分比设置宽度以使所有分辨率的 div 居中对齐

谢谢，

【问题讨论】：

标签： html css

【解决方案1】：

您需要将box-sizing 更改为border-box 以在元素宽度内包含边框：

#root div {
    ...
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JSFiddle demo.

-moz--prefixed 版本适用于 Firefox，因为 Firefox 不支持默认的 box-sizing 属性。不过，这确实适用于 IE8。

【讨论】：

我无法从你的回答中得到你的答案。我希望 div 内容使用百分比宽度居中，但您的答案与边框有关。 ?
我没有为 div 使用任何边框只是为了让你们理解目的只是我把边框颜色放在小提琴中
在这里查看小提琴jsfiddle.net/33Fzu/146 div 内容是页面的中心，这就是我的问题

【解决方案2】：

试试这个小提琴链接： http://jsfiddle.net/neharikapadala/33Fzu/155/

#root
{
    width:60%;
    margin:0 auto;
    padding-left:20%;
    padding-right:20%;
}

#child1
{
    width:50%;
    float:left;
    text-align:center;
    background-color:red

}
#child2
{
    width:50%;
    float:left;
    text-align:center;
    background-color:green
}

【讨论】：

谢谢。但请清楚地阅读我的问题，我需要支持所有决议。它不会将内容对齐到其他分辨率的中心。
它在所有分辨率下都能正常工作。我也检查了手机中的代码。它按预期工作。因为我们已经以百分比定义了所有内容。它会根据分辨率选择宽度
是的，毫无疑问，这在所有分辨率下都能完美运行……非常感谢 Neharika :)

【解决方案3】：

你可以这样做：

CSS 可以是这样的：

#root
{
    width:100%;
    margin:0 auto;
}

#child1
{
    width:50%;
    float:left;

}
#child2
{
    width:50%;
    float:left;
}

【讨论】：

我需要将 div 内容并排居中到页面中心。你的小提琴输出不同
你的小提琴输出和我现在得到的一样。我需要“XXXX”和“YYYY”在页面的中心
添加我上面添加的css。你会得到输出。删除你的 CSS 并添加新的 CSS
我已经添加了你的 css 但没有将 div 内容居中。你发送了与我已经使用过的相同的 CSS
天啊！！！在你的小提琴中，内容在哪里？“XXX”只到左角。