2

外側の div で div を垂直方向に中央に配置しようとしましたが、うまくいきません。Web を見回そうとしましたが、特定の問題の説明が見つかりませんでした... 水平方向に整列しようとすると、機能しています => "margin:0 auto;"

誰 ？

<div style="height:240px;width:100%;">

 <div style="width:33%;height:100px;margin:auto 0;">
   <span class="" style="font-size:26px">Hello </span>
   <br/><br/>
   <img style="width:150px" src="example.jpeg"
/>
 </div>

</div>
4

4 に答える 4

1

使用するdisplay:table;

マークアップ

<div class="outer">

 <div class="inner">
   <span class="" style="font-size:26px">Hello </span>
   <br /><br/>
   <img style="width:150px" src="http://placehold.it/150x50" />
 </div>

</div>

CSS

.outer
{
    display:table;
    height:240px;
    width:100%;
    border:1px solid black;
    text-align:center;
}
.inner
{
    display:table-cell;
    width:33%;
    height:100px;

    vertical-align:middle;
}

フィドル

于 2013-07-18T09:20:40.880 に答える
1

margin:auto既知の高さを持つ絶対配置要素のみを垂直方向に中央揃えできます( fiddle ):

.container {
    position: relative;
}

.centered {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}
于 2013-07-18T10:03:40.463 に答える
1

このプラグインを使用して作業を行うことができます: 

jQuery.fn.verticalAlign = function ()
{
    return this
            .css("margin-top",($(this).parent().height() - $(this).height())/2 + 'px' )
};

次に、次のように使用できます。

$("#mydiv").verticalAlign()

あなたのコードのために： 

<div style="height:240px;width:100%;">

 <div id="mydiv" style="width:33%;height:100px">
   <span class="" style="font-size:26px">Hello </span>
   <br/><br/>
   <img style="width:150px" src="example.jpeg"
/>
 </div>

</div>

以下を追加するだけです：

$("#mydiv").verticalAlign()
于 2013-07-18T09:16:12.573 に答える
0

このコードを試してください。それは働いています..... 

<style>
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 150px;
height: 150px;
border: 1px solid red;
margin: auto auto;
}

</style>
</head>
<body style="height: 100%; margin: 0;">
<div class="child"></div>
</body>
于 2014-08-21T11:52:26.763 に答える