0

2 つの div があり、1 つは別の内部にあり、内側の div には中央に配置された ap タグがあります。マークアップは

<div class="box1">
    <div class="box2">
        <p>hello</p>
    </div>
</div>

スタイルのルールは

.box1 {
    width: 400px;
    height: 400px;  
    background: red;
    text-align: center;
}
.box2 {
    display: table-cell;
    width: 200px;
    height: 200px; 
    margin: auto;
    vertical-align: middle; 
    text-align: center;   
    background: yellow;
}

私がやろうとしているのは、内側のdiv（box2）の内側でpタグを垂直方向と水平方向に中央に配置し、外側のdiv（box1）の内側に垂直方向と水平方向に内側のdivを中央に配置することです。内側の div(box2) を外側の div の中央に配置できませんでした。私がそれをするのを手伝ってください。私はこれのためにフィドルを作成しました-> http://jsfiddle.net/64WAW/1/

4

4 に答える 4

2

これを見てください：

http://jsfiddle.net/itz2k13/64WAW/2/

.box1 {
 display: table-cell;
 width: 400px;
 height: 400px;  
 background: red;
 text-align: center;
 vertical-align: middle;
}

.box2 {    
 width: 200px;
 height: 200px; 
 background: yellow;
 margin: auto;
 line-height: 200px;
}
于 2013-06-08T09:01:31.580 に答える
1

HTML:

<div class="box1">
    <div class="box2container">
        <div class="box2">
            <p>hello</p>
        </div>
    </div>
</div>

CSS:

.box1 {
    width: 400px;
    height: 400px;  
    background: red;
    text-align: center;
}
.box2 {
    position:relative;
    top:-50%;
    left:-50%;
    width: 200px;
    height: 200px; 
    background: yellow;
    line-height:200px;
}

.box2container{
    width: 200px;
    height: 200px; 
    position:relative;
    top:50%;
    left:50%;
}

このソリューションdisplay:table-cellでは、古いブラウザーでサポートされていないものを使用しないようにします。フィドルをチェックしてください

于 2013-06-08T09:10:17.587 に答える
1

フレックスボックスを使用します。簡単です。次のようになります。

.box1,
.box2{
  display: -moz-box; /*Safari,  iOS, Android browser, older WebKit browsers. */
  display: -webkit-box;/* Firefox (buggy) */
  display: -ms-flexbox; /*IE 10*/
  display: -webkit-flex;/*Chrome 21+ */
  display: flex;/*Opera 12.1, Firefox 22+ */

  -webkit-box-align: center; 
  -moz-box-align: center;
  -ms-flex-align: center; 
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center; 
  -moz-box-pack: center; 
  -ms-flex-pack: center; 
  -webkit-justify-content: center;
  justify-content: center;
}
.box1{
    width: 400px;
    height: 400px;  
    background: red;
    text-align: center;     
}
.box2 {
    background: yellow;
    width: 200px;
    height: 200px;
}

デモをご覧ください。詳細はチュートリアルをご覧ください。

于 2013-06-08T09:11:47.597 に答える