Центр содержимого области между верхним и нижним колонтитулом

Question

Центр содержимого области между верхним и нижним колонтитулом

0

ВОПРОС: Я стараюсь, чтобы мой раздел {{TEXT}} или ".acton" оставался центрированным в теле страницы и между нижним колонтитулом и заголовком во все времена.

Я использую этот шаблон для создания целевых страниц в программном обеспечении автоматизации маркетинга под названием ACT-ON. Так что, надеюсь, любое исправление, которое мы можем внести в содержание тела, останется в центре внимания.

Вот мой jsfiddle: http://jsfiddle.net/misterizzo/dMu79/

    <body>
<div id="bg">
   <img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png">
</div>
<div id="main">
 <div id="header">
  <div id="top-left"><a href="http://medata.com/"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo"></a>
  </div>

    <div id="nav">
    <ul>
        <li><a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Solutions</a>
            </span>
        </li>
        <li><a href="#"><span class="button">About Us</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Home</a>
            </span>
        </li>
    </ul>
    </div>

<div class="acton">
{{TEXT}}
</div>

<div id="footer">
<ul>
        <li><a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Solutions</a>
            </span>
        </li>
        <li><a href="#"><span class="button">About Us</a>
            </span>
        </li>
        <li><a href="#"><span class="button">Home</a>
            </span>
        </li>
    </ul>
</div>
</div>



</div>
</body>

Надеюсь, это мои последние вопросы по этому шаблону, который я создавал. Я искренне ценю всю помощь от всех до сих пор!

Misterizzo 18 фев. 2014, в 19:09

Источник

Теги:

html

css

templates

center

4 ответа

0

Вот одно решение, которое может сработать для вас:

Демо-скрипт

CSS:

.acton {
    width: 900px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    top: 106px;
}

badAdviceGuy 18 фев. 2014, в 16:32

0

Вы HTML разбиты по местам и не хватает закрывающего div. Я исправил его в этом скрипте, и обновленный код ниже:

 <div id="header">
      <div id="top-left">
           <a href="http://medata.com/"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" alt="Visit Medata Home Page" class="logo" title="Medata.com" atl="Logo"></a>
       </div>

      <div id="nav">
           <ul>
                <li>
                     <a href="http://newsworthy.medata.com/" target="_blank"><span class="button">NewsWorthy</span></a>
                </li>
                <!-- the closing span were after the closing A -->
                ...
           </ul>
      </div>
 </div> <!-- this div was missing -->

DAC84 18 фев. 2014, в 16:09

0

Я исправил его, установив верхний край в разделе.action.

Также я удалил позицию-право и положение-левое

Обратите внимание, что margin-top установлен на 40%. Это связано с тем, что он принимает во внимание навигацию и нижний колонтитул. Вы можете играть с полями в зависимости от другого содержимого, которое добавлено над ним или под ним.

рабочий jsfiddle

http://jsfiddle.net/dMu79/9/

.acton {
    width: 900px;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40%;
    text-align: center;
}

wuno 18 фев. 2014, в 15:57

Ещё вопросы

G-Cyr · Accepted Answer · 2014-02-18T16-09-00.000Z

вы можете легко использовать отображение: table,table-row/table-cell свойства table,table-row/table-cell таблицы вместе с: vertical-align:middle; если ваш HTML действителен и со структурой, необходимой.

Сброс CSS должен быть загружен перед вашим собственным CSS, он также будет избегать использования! Important.

//comment// не является допустимым комментарием в CSS, но /* comment */ is.

http://jsfiddle.net/dMu79/7/

в основном структура:

<body or wrapper><!-- as heigh/width:100%; and display:table -->
<header> as table-row</header>
<main> as table-cell and height:100% , it will shrink to leave space to header and footer</main>
<footer> as table-row</footer>
</body or wrapper>

Спасибо за это, кажется, это работает лучше всего!