Question

我试图将多个元素img和按钮类型集中在一个固定在屏幕顶部的div中。我已经尝试过我可以在互联网上找到的所有技巧，但没有一个有效。无论窗户的大小是什么，我都希望它能够工作。

<div id='FixedMenu'>
    <button class='MenuItem'>Home</button>
    <button class='MenuItem'>About</button>
    <img id='Main' src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png'></img>
    <button class='MenuItem'>Tools</button>
    <button class='MenuItem'>Events</button>
    <img id='CloseMenu' src='http://upload.wikimedia.org/wikipedia/commons/d/df/Chevron_up_font_awesome.svg'></img>
</div>

http://jsfiddle.net/clarinetking/2PGZS/37/

Answer 1

将text-align:center;添加到您的FixedMenu css

http://jsfiddle.net/2aUbv/

Answer 2

如果你添加假的flex / justify-content，你可以得到一些接近你想要的东西： http://jsfiddle.net/2PGZS/45/

#Main {
    vertical-align:middle;
    height:50px;
    width:80px;
}
#FixedMenu {
    position:fixed;
    margin:0 auto;
    top:0%;
    left:0%;
    background:#444444;
    width:100%;
    height:70px;
    transition: all 1s;
    text-align:justify;/* prepare fake flex justify */
}
#FixedMenu:after { /* add an extra line so inline content is justified */
    content:'';
    display:inline-block;
    width:100%;
}
#FixedMenu.active {
    background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
    height:40px;
    width:80px;
    vertical-align:middle;
}
#Start {
    margin-top:100px;
}
#CloseMenu {
    width:70px;
    height:70px;
    transition: all 1s;
    vertical-align:middle;
}
#CloseMenu.opacite {
    opacity:0.1;
}

替代，uparrow始终位于右上方http://jsfiddle.net/2PGZS/46/

Answer 3

这里没有js的需要。纯粹的css。

#Main {
    position:relative;
    height:50px;
    width:80px;
    display: inline-block;
}
#FixedMenu {
    position:fixed;
    margin:0 auto;
    top:0%;
    left:0%;
    background:#444444;
    width:100%;
    height:70px;
    transition: all 1s;
    text-align:center;
}
#FixedMenu.active {
    background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
    display: inline-block;
    height:40px;
    width:80px;
    float:top;
}
#Start {
    margin-top:100px;
}
#CloseMenu {
    position:fixed;
    width:80px;
    height:80px;
    transition: all 1s;
}
#CloseMenu.opacite {
    opacity:0.1;
}
#FixedMenu * {

}

将流体固定div中的多个元素居中

3 个答案: