0

インラインにする必要があるボタンがいくつかあるコントロールパネルを作成しようとしています。ウィンドウの幅が大きい場合、ボタンは画面上部の中央に配置され、ウィンドウの幅が小さい場合、ボタンは画面の下部の中央に配置されます。場合によっては、いくつかのボタンを削除しますが、div はまだ中央に配置する必要があります。

  1. 絶対配置を使用する必要がありますよね？

コントロールパネルが一番上にあるとき、私は持っているべきです

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

そして、コントロールパネルが一番下にあるときは

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

ここで問題が発生します。divを中央に配置したい。一部のボタンが削除または追加される可能性があるため、div の幅がわかりません。常に中央に配置する必要があります。だから私が試したのは、2つのdivを使用することでした

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

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

これは、コントロール div の任意の幅に対して機能します。しかし今の問題は、ボタンがインラインでなくなったことです。それで、解決策は何ですか？

ここに私がしようとしているもののフィドルがあります: http://jsfiddle.net/xe8EW/2/

4

2 に答える 2

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;
}
于 2013-09-09T08:00:10.603 に答える
0

このような

デモ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>

デモ

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();
};

デモ3

于 2013-09-09T07:43:18.057 に答える