0

このFiddleを参照してください。親子で幅と高さを固定せずに青い div を中央に配置するにはどうすればよいですか?

これはSOに投稿することです

<div class="parent">
<div class="child">
</div>
</div>

アップデート

これらは配置された要素です。子を画面の中央に配置したいです。

更新 2

hereの中央に表示されますが、親でも子でも固定の幅や高さを使用することはできません。他の要素の上に配置する必要があるため、配置された要素が必要です。

4

5 に答える 5

0

これで問題は解決すると思いますが、これにはJQuery[.width()]が必要です。

.parent{
    position: fixed;    
    /* I can't use static width nor height, TO DELETE(try changing this)*/
    width: 500px;
    height: 400px;
    background: red;    
}

.child{
    display: inline-block;
    position: absolute; 
    /*Simulate width and height, these are actually calculated by content*/
    width: 100px;
    height:50px;
    background: lightblue;   
}

JQuery onLoad:[ JSFiddle ]

$(function changePostion() {
    var s = $(".parent").width(); 
    var e = $(".child").width();   
    var d= (s-e)/2;
    $(".child").css({"left":d}); 
    var sh = $(".parent").height(); 
    var eh = $(".child").height(); 
    var dh= (sh-eh)/2;
    $(".child").css({"top":dh});    
});

この記事は、html 属性を中央に配置するための最適なチュートリアルです。JQuery を使用せずに行うためのより良い方法があるかもしれません。

于 2013-04-11T15:23:25.470 に答える
0

動的モーダルは、世界で最大の苦痛になる可能性があります。高さと幅を変更するにはJSが必要です。プラグインは使えますか？もしそうなら、ここにいくつかの良いオプションがあります。Twitter ブートストラップには非常に簡単にセットアップできるモーダルがありますが、ajax と iframe を介して div をロードするのは困難です。どちらかを選択する必要があります。simplemodal ( http://www.ericmmartin.com/projects/simplemodal/ ) は優れていますが、それでも多くの作業を自分で行う必要があります。iframe と ajax コンテンツで動作します。

于 2013-04-11T15:47:26.753 に答える