0

divを中央に揃えたい。

このような

ここに画像の説明を入力

私はmargin-top、vertical-alignを試しました

しかし、それらも機能しません。

私も左を0px未満に設定しました

しかし、内側のdivはまだ左の0pxです

上の画像のようにdivが必要な場合

上の画像のようにcssを変更するにはどうすればよいですか？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div
{
    border:solid;
}
#outer
{
    position:absolute;
    height:100px;
    width:50px;
    left:50px;
    top:50px;
}
#inner
{
    background:white;
    height:20%;
    width:120%;
    left:-10px;
    margin-top:auto;
    margin-buttom:auto;
    vertical-align:middle;
}
</style>
</head>
<body>

<div id="outer">
    <div id="inner">abc</div>
</div>
</body>
</html>
4

4 に答える 4

3

これを試してください - http://jsfiddle.net/vn6Wx/

#inner
{
    background:white;
    height:40%;
    width:200%;
    position: relative;
    left:-50%;
    top: 25%;
    margin-top:auto;
    margin-buttom:auto;
    vertical-align:middle;
}
于 2012-06-15T18:34:17.657 に答える
1

JavaScript を使用せずに要素を垂直方向に配置する唯一の柔軟な方法は、要素を表のセルに配置することです。

于 2012-06-15T18:59:53.940 に答える
0

これをチェックして..

http://jsfiddle.net/dmvcs/

#outer{
  position:absolute;
  height:100px;
  width:50px;
  left:50px;
  top:50px;
  border:2px solid red;
}

#inner{
  background:white;
  position:absolute;
  height:50px;
  width:100px;
  top:50%;
  left:50%;
  margin-top:-25px;
  margin-left:-50px;
  border:2px solid green;
}​
于 2012-06-15T18:36:49.653 に答える
0

これを試すことができます：

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            html { height:100%; width:100%; }
            body { background-color: yellow; margin:0; padding:0; }
            #outer { width:100%; min-height:100%; background-color:red; position:absolute; }
            #inner { width:500px; height:500px; background-color:blue; position:relative; margin:10% auto; }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">
            </div>
        </div>
    </body>
</html>

幸運を！

于 2012-06-15T19:31:40.183 に答える