0

div を別の div 内で水平方向に中央に配置する必要があります

ここに私のHTMLコードがあります:

<div id="outer" class="outerDiv">
    <div id="inner" class="innerDiv">
    </div>
</div>

css は次のとおりです。

.outerDiv {
    width:100px;
    height:100px;
    background:red;
}

.innerDiv {
    width:50px;
    height:50px;
    background:blue; 
    // what to add here ?
}

あなたはそれを試すことができます：http://jsfiddle.net/nggSG/

青の div を赤の div 内で水平方向に中央揃えするにはどうすればよいですか?

4

4 に答える 4

2

このような ：

.innerDiv {
    width:50px;
    height:50px;
    background:blue;
    margin : 0 auto;
   }
于 2013-06-19T15:40:36.120 に答える
2 
.innerDiv {
    margin: auto;
    width:50px;
    height:50px;
    background:blue;
}

div を水平方向に中央揃え

于 2013-06-19T15:41:05.773 に答える
0

必要な作業は次のとおりです。

.outerDiv {
    width: 100px; height: 100px;

    background-color: red;
    position: relative;
}

.innerDiv {
    width: 50px; height: 50px;
    top: 25px; left: 25px;

    background: blue;
    position: absolute;
}

内側の div から外側の div の幅と高さを引いて 2 で割ると、内側の div をどれだけ移動する必要があるかがわかります。また、外側の divは である必要がposition: relativeあり、内側の divは である必要がありますposition: absolute。

より動的なセンタリング ソリューションが必要な場合、私は Shipp Co ( http://shipp.co/midway ) の Midway.js を使用しています。これが役に立ったことを願っています！

編集: jsFiddle - http://jsfiddle.net/5A9sq

于 2013-06-19T16:15:06.783 に答える