CSS在居中元素旁边动态居中div答案

【问题标题】：CSS dynamically center div beside centered elementCSS在居中元素旁边动态居中div
【发布时间】：2011-08-09 15:55:33
【问题描述】：

我有一个设计问题。我在页面上有一个居中的徽标，我想要的是一个位于页面左侧和徽标左侧之间的 div。

我如何仅使用 css 来实现这一点？

这是一个例子：

【问题讨论】：

标签： css layout html

【解决方案1】：

看看这个演示......

http://jsfiddle.net/UnsungHero97/7Z5fu/

HTML

<div id="wrapper">
    <div id="box-left">
        <div id="left"></div>
    </div>
    <div id="box-center">
        <div id="center"></div>
    </div>
</div>

CSS

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

#wrapper {
    width: 100%;
}

#box-center, #box-left {
    width: 50%;
    float: left;
}

#left {
    border: 1px solid magenta;
    height: 50px;
    width: 50px;
    position: relative;
    left: 50%;

    /* half of width of #left + half of margin-left of #center */
    margin-left: -75px; /* 50/2 + 100/2 = 25 + 50 = 75 */
}

#center {
    border: 1px solid magenta;
    height: 50px;
    width: 200px;
    margin-left: -100px;
}

我希望这会有所帮助。

【讨论】：

【解决方案2】：

如果logo宽度可以固定就可以了，代码如下。

HTML：

<div id="logo"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></div>

<div id="otherdiv"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></div>

CSS：

#logo {
        width: 100px;
        height: 50px;
        position: absolute;
        top: 50px;
        left: 50%;
        margin-left: -50px;
        text-align: center;
    }

    #otherdiv {
        text-align: center;
        position: absolute;
        top: 50px;
        left: 0;
        width: 50%;
        margin-left: -50px; /* Half of the logo width */
    }

    #logo img,
    #otherdiv img {
        width: 100px;
    }

    #otherdiv img {
        margin-left: 50px; /* Half of the logo width */
    }

【讨论】：

【解决方案3】：

这里我有两个左右分开的 div，leftDiv 内部有一个 div，即 X_div，使其分别为 width:20% 和 margin:0 auto。如果分辨率扩展，x_div 也会根据您的要求扩展。

#leftDiv {
width:30%;
height:auto;
}


#leftDiv X_Div {
width:20%;
height:auto;
margin:0 auto;
}


#rightDiv {
width:70%;
height:auto;
}

【讨论】：