私は解決策を探していて、しばしば示唆されているものを実装しようとしましたが、別のdiv内でdivを水平方向に中央管理していません。divsのセンタリングが正常に機能しない
私のCMSでは、ページの下部に向かって最大4つの情報ブロックを表示したいと考えています。だから、2つのコンテナdiv内にゼロと4つのdivの間に入れようとしています。 4つのdivは、ページに表示されるdivの数に応じて、使用可能な幅の19％、33％または49％の幅を取得します。内側の容器は、外側の容器内で水平にセンタリングされているものとする。それによって、4つまでのdivのグループが、もちろん、水平の中心に終わるはずです。内側のコンテナはメインコンテンツと同じ幅とそれより上にある2つの列が中央に配置されているので、垂直方向に表示されます。外部コンテナは、ページの全幅をとり、背景イメージを持ちます。
次のように私のコードは以下のようになります。
私のスタイルシートで<!-- BEGIN USER MODULES -->
<tr>
<td align="left" valign="top">
<?php if ($this->countModules('user1 and user2') || $this->countModules('user1 and user3') || $this->countModules('user1 and user4') || $this->countModules('user2 and user3') || $this->countModules('user2 and user4') || $this->countModules('user3 and user4')) : ?>
<style type="text/css">#user1, #user2, #user3, #user4 { width:49%; }</style>
<?php endif; ?>
<?php if ($this->countModules('user1 and user2 and user3') || $this->countModules('user1 and user2 and user4') || $this->countModules('user1 and user3 and user4') || $this->countModules('user2 and user3 and user4')) : ?>
<style type="text/css">#user1, #user2, #user3, #user4 { width:33%; }</style>
<?php endif; ?>
<?php if ($this->countModules('user1 and user2 and user3 and user4')) : ?>
<style type="text/css">#user1, #user2, #user3, #user4 { width:19%; }</style>
<?php endif; ?>
<?php if ($this->countModules('user1 or user2 or user3 or user4')) : ?><div id="wrap1234"><div id="user1234">
<?php if($this->countModules('user1')) : ?><div id="user1" class="module_bc"><jdoc:include type="modules" name="user1" style="xhtml" /></div><?php endif; ?>
<?php if($this->countModules('user2')) : ?><div id="user2" class="module_bc"><jdoc:include type="modules" name="user2" style="xhtml" /></div><?php endif; ?>
<?php if($this->countModules('user3')) : ?><div id="user3" class="module_bc"><jdoc:include type="modules" name="user3" style="xhtml" /></div><?php endif; ?>
<?php if($this->countModules('user4')) : ?><div id="user4" class="module_bc"><jdoc:include type="modules" name="user4" style="xhtml" /></div><?php endif; ?>
</div><div class="clear"></div></div><?php endif; ?>
</td>
</tr>
私はこれを持っている：
#wrap1234 { background:transparent url(images/header_bg.png) no-repeat scroll 0 0; border-bottom:1px solid #444444; border-top:1px solid #444444; margin:25px 0 10px; padding:5px 0; text-align:center; align:center;}
#user1234 { width:1420px; margin-left:auto; margin-right:auto; }
#user1, #user2, #user3, #user4 { float:left; margin:5px 0; padding:5px 0; text-align:left; }
次のようにこのすべてが置かれたテーブルと体があり、スキップ直接階層線の外側にあるもの：
<body><div id="wrapper_main"><center><table border="0" cellpadding="0" cellspacing="0" width="<?php echo $this->params->get('width'); ?>" id="main_table"><tbody>
ボディとテーブルのCSSは以下の通りです。 Firebugを使用すると、電源を切っても差が出るものは見つけられません。
html, body, form, fieldset{margin:0; padding:0;}
body {background:#222222 none repeat scroll 0 0; color:#777777; font-family:Helvetica,Tahoma,sans-serif; font-size:0.72em; height:100%; text-align:center;}
#wrapper_main {background:#FFFFFF url(images/wrapper_main_bg.gif) repeat-x scroll left top; border-bottom:2px solid #CCCCCC; padding-bottom:20px; position:relative; width:100%; z-index:1;}
td, div {font-size:100%;}
実際のページは、開発サイトのjldev d o t joomlaloft.comから入手できます。
ご覧のとおり、内側のコンテナに固定幅と左右の余白を指定しました。これは、divを水平に中央に配置する方法としてよく示唆されています。ただし、divを含む内部コンテナは左揃えになります。
これを動作させることはできますか？あるいは、私は代替案を試すべきですか？例えば、左端と右端の情報ブロックdivに左右に可変マージンを入れます。
私はstackoverflowに多くの非常に良い答えがあることを知ったので、誰かが私が間違っていた場所を教えてくれることを期待しています。私はインスピレーションから外れています...あなたが与えることができる任意の助けのために事前に多くのおかげで！
PS Btwこれは私が今まで見た中で最も直感的かつ実用的なフォーラムの一つでなければなりません！
1420pxの幅は完全に誤算されました。実際の問題を指摘したので、これを投票します。幅が1000pxの正しい量に設定されると、すべてが機能しました。ありがとう！そうでなければ最高の答えだったはずの彼の代わりにncallawayにも感謝します。 –