Я искал решения и пытался реализовать то, что часто предлагается, но мне не удается горизонтально центрировать div внутри другого div.
С моей CMS я хочу показать до четырех информационных блоков внизу страницы. Итак, я пытаюсь поместить от нуля до четырех делителей в двух контейнерах деления. Ширина четырех элементов равна 19%, 33% или 49% доступной ширины в зависимости от того, сколько элементов отображается на странице. Внутренний контейнер должен быть горизонтально центрирован внутри внешнего контейнера. Таким образом, группа из четырех делителей должна, конечно, оказаться в горизонтальном центре. Поскольку внутренний контейнер имеет такую же ширину, что и основное содержимое, плюс два столбца над ним, которые расположены по центру, он должен отображаться по линии вертикально. Внешний контейнер занимает всю ширину страницы и имеет фоновое изображение.
Мой код теперь выглядит следующим образом:
<!-- 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 joomlaloft.com.
Как вы можете видеть, я дал внутреннему контейнеру фиксированную ширину, а также левый и правый поля автоматически, что часто предлагается в качестве способа центрировать div по горизонтали. Однако внутренний контейнер с div в нем выровнен по левому краю.
Можно ли заставить это работать? Или я должен попробовать альтернативный вариант, например, поместив переменное поле слева и справа в самый левый и самый правый div блока информации?
Я видел, что есть много очень хороших ответов на stackoverflow, поэтому я надеюсь, что кто-то сможет сказать мне, где я ошибся. На самом деле, я вне вдохновения ... Большое спасибо заранее за любую помощь, которую вы можете оказать!
PS Кстати, это один из самых интуитивных и практичных форумов, которые я когда-либо видел!