CSS 居中 - 带有可位于屏幕顶部和底部的内联按钮的 div

Question

我正在尝试制作一个控制面板，它有几个必须内联的按钮。 当窗口的宽度很大时，按钮位于屏幕顶部的中心，并且 当窗口的宽度较小时，它们位于屏幕底部的中心。 在某些情况下，我删除了一些按钮，但 div 仍然必须居中。

1. 我必须使用绝对定位，对吗？

当控制面板在顶部时，我应该有

#control-div {
    position: absolute;
    top: 0;
}

当控制面板在底部时应该是

#control-div {
    position: absolute;
    bottom: 0;
}

问题来了。我希望 div 居中。我不知道 div 的宽度是多少，因为可能会删除或添加一些按钮。它必须始终居中。所以我尝试的是使用两个 div

#outer-div {
    position: absolute;
    left: 50%;
}

#control-div {
    position: absolute;
    left: -50%
}

这适用于控件 div 的任意宽度。但现在的问题是按钮不再是内联的。那么有什么办法呢？

这是我正在尝试的一个小提琴： http://jsfiddle.net/xe8EW/2/

Answer 1

这样

演示2

#control-div{
    background-color: #FF0000;
    font-family: Verdana,Geneva,Arial,sans-serif;
    height: 70px;
    left: 50%;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    visibility: visible;
    width: 250px;
}

html

<div id="control-div">
control-div
</div>

---

demo

css

#control-div {
 width: 100px;
height: 100px;
background-color: red;    
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;    
margin: auto;
}

或

var centerIt = function (el /* (jQuery element) Element to center */) {
    if (!el) {
        return;
    }
    var moveIt = function () {
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
    }; 
    $(window).resize(moveIt);
    moveIt();
};

---

demo3

Answer 2

您可以使用包装器将菜单置于顶部或底部。然后你可以让孩子居中。

像这样：

HTML：

<div class="menu-wrapper">
    <div class="menu">
        <a href="#">Item one</a>
        <a href="#">Item two</a>
        <a href="#">Item three</a>
    </div>
</div>

CSS：

.menu-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
@media screen and (min-width: 0) and (max-width: 520px) {
  .menu-wrapper {
    top: auto;
    bottom: 0;
  }
}
.menu-wrapper .menu {
    width: 100%;
    text-align: center;
}

媒体查询在上下对齐之间切换。 text-align center 确保您的文本居中并指定宽度。只要您保持菜单元素内联（锚点，内联按钮都可以），它就应该工作

注意：如果您希望菜单始终显示，您可能需要将 position:absolute 替换为 position:fixed。但这取决于您的设计意图。

这是一个 jsfiddle： http://jsfiddle.net/nQmrx/2/

更新： 不知道您想要背景颜色；）您可以为此包装另一个 div。 http://jsfiddle.net/nQmrx/4/

.menu-wrapper .menu .background {
    background-color: #9f9f9f;
    display: inline;
}