4

非常に単純な問題がありますが、解決できないようです。主な要素であるdiv内にテーブルがあります。これで、テーブル内に td タグがあり、幅と高さが iPhone の画面サイズに設定されています。ここで、基本的に、そのテーブルを div タグ内の td セルで中央に配置して、「画面」がブラウザー ウィンドウの中央に配置されるようにします。それ、どうやったら出来るの？

その div をテーブルに置き換えると問題は解決しましたが、代わりに div を使用したいと思います。

ありがとうございました

4

5 に答える 5

8

これを試してみてください、私はこのコードを実行します-ここでデモ、非常に簡単でシンプルなコード（IEの古いバージョンのみにハックコードと追加のスパンタグを使用しました） http://jsfiddle.net/ERuX4/1/

<div class="demo wraptocenter">
   <span></span>
   <img src="http://www.spitzer.caltech.edu/images/twitter.png?1295473781" alt="" />
</div>

css

.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

/*End wraptocenter - image Vcenter  patch styles*/    
.demo  {
         width:100px;
         height:100px;
         border:1px solid red;
         position:absolute;
         top:50%;
         left:50%;
         margin-top:-100px;
         margin-left:-100px;}
于 2012-04-04T11:20:34.007 に答える
0 
<style type="text/css">
.outer { width:800px; height:640px; }
.inner {
    position:relative; top:50%; left:50%;
    width: 320px;
    margin-left: -160px; /* half the width */
    height: 240px;
    margin-top: -120px; /* half the height */
</style>

<div class="outer">
    <div class="inner">I'm centered!</div>
</div>
于 2012-04-04T10:48:59.500 に答える
0

これを試して：

div#centerlayout 
{ 
    position:absolute; 
    left:50%; 
    top:50%; 
    height:XXXpx; 
    width:XXXpx; 
    margin-top:-XXXpx; 
    margin-left:-XXXpx; 
}
于 2012-04-04T10:50:00.030 に答える
0

HTML

    <div class="img_thumb">
    <table>
        <tr><td>adfasfdasf</td></tr>
        <tr><td>adfasfdasf</td></tr>
        <tr><td>adfasfdasf</td></tr>
        <tr><td>adfasfdasf</td></tr>
        <tr><td>adfasfdasf</td></tr>
    </table>
</div>

CSS

.img_thumb {
    background: none repeat scroll 0 0 red;
    display: table-cell;
    height: 200px;
    vertical-align: middle;
    width: 200px;

}
table {
    border: 1px solid;
    width: 100px;
    margin:auto;
}

またはデモを参照してください:- http://jsfiddle.net/QHEnL/16/

于 2012-04-04T11:14:19.987 に答える
0

私は IE でテストしていません (FF と Safari で動作します) が、jQuery を使用している場合は、これを使用してpage、ページ内のクラスで div を中央に配置できます。

var pageMargin = ($(document).width() - $("div.page").width()) / 2;
$("div.page").css("margin-left", pageMargin).css("margin-right", pageMargin);
于 2012-06-01T21:01:40.283 に答える