Центрирование содержимого в строке полной ширины в Foundation

Question

Центрирование содержимого в строке полной ширины в Foundation

0

Кто-нибудь знает, как вы собираетесь сосредоточить контент на полной ширине, используя Zurb Foundation?

В настоящее время у меня есть:

HTML

    <div class="row full-width nav-back">

        <div class="row large-12 column">

        <!-- CONTENT -->

        </div>

    </div>

CSS

.nav-back{
height:80px;
background-image: -webkit-gradient(linear,left top,left bottom,
color-stop(0, #004B91),
color-stop(1, #002952));
background-image: -o-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: -moz-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: -webkit-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: -ms-linear-gradient(bottom, #004B91 0%, #002952 100%);
background-image: linear-gradient(to bottom, #004B91 0%, #002952 100%);

}

Это приводит к тому, что содержимое внутри "большого-12 столбца" растягивается на 100% так же, как родительский контейнер "полная ширина",

Есть ли способ сосредоточить контент, содержащийся внутри столбца "большой-12"?

Благодаря :-)

Kieran 03 апр. 2014, в 21:59

Источник

Теги:

html

zurb-foundation

css

1 ответ

Ещё вопросы

boxer santaros · Answer 1 · 2014-04-03T17-41-00.000Z

Вы пытались удалить строку во вложенном контейнере столбца?

<div class="row full-width nav-back">
  <div class="large-12 columns"><!-- CONTENT --></div>
</div>

Также может быть, что .full-width отвечает за 100% строки. Обычно строка имеет максимальную ширину, которая центрирует ваш контент при превышении. В фундаменте docs его max-width: 80rem; , Таким образом, вы можете попробовать без полной ширины.

<div class="row nav-back">
  <div class="large-12 columns"><!-- CONTENT --></div>
</div>

С.больше-центрированным вы также можете центрировать меньшую колонку подряд, так как 12 столбцов (большой-12, средний-12 и т.д.) Обычно составляют 100%.

<div class="row full-width nav-back">
  <div class="large-10 large-centered columns"><!-- CONTENT --></div>
</div>