Центр охватывает с начальной загрузкой

У меня есть этот HTML код:Центр охватывает с начальной загрузкой

<div id="header" class="row-fluid text-center"> 
    <div class="span1 text-center header">HOME</div> 
    <div class="span1 text-center header">PORTFOLIO</div> 
    <div class="span1 text-center"><img src="images/logo.jpg" /></div> 
    <div class="span1 text-center header">ABOUT</div> 
    <div class="span1 text-center header">CONTACT</div> 
</div> 

<div class="row text-center"> 
    <img src="images/header.png" /> 
</div>

Я желаю, чтобы это было по центру. Я пытался работать с классом offset, но он не на 100% центрирован. enter image description here

источник

2013-11-07 vlio20

Можете ли вы вставить скриншот, чтобы мы знали, что именно вы хотите? –

Бутстрап-строка состоит из 12 «разделов». У вас есть 5 секций внутри него. Нечетное число всегда будет вне центра с использованием только классов начальной загрузки, вам нужно будет переопределить загрузку с помощью собственного css. – Andrew

Так есть ли работа вокруг? – vlio20

Поскольку у вас есть 5 элементов в вашем ряду, вам нужно компенсировать на 3,5, а не смещение на 3, чтобы сделать его точно по центру. Лучший способ сделать это - создать пользовательский класс offset3-5. Вот код, который вам нужен. Кроме того, здесь является рабочей скрипкой: Link to fiddle

HTML 
<div class="cont"><div id="header" class="row-fluid text-center"> 
    <div class="offset3-5 span1 text-center header">HOME</div> 
    <div class="span1 text-center header">PORTFOLIO</div> 
    <div class="span1 text-center"><img src="images/logo.jpg" /></div> 
    <div class="span1 text-center header">ABOUT</div> 
    <div class="span1 text-center header">CONTACT</div> 
</div> 
</div> 
<div class="row text-center"> 
    <img src="images/header.png" /> 
</div> 

CSS 
.row-fluid .offset3-5:first-child 
{ 
    margin-left: 29.166666%; 
}

Diagram of 12/5

В 12 черных ящиках выше, представляют собой загрузочный ряд, и красные прямоугольники представляют свои 5 коробок. Если у вас есть смещение 3, это будет немного влево. Решением было сделать новое смещение. Чтобы получить правильный процент, я сделал (3.5/12) * 100, чтобы получить 29.166. Вы можете сделать любое настраиваемое смещение, которое вам нужно, выработав, сколько идет с каждой стороны, а затем выполните одно и то же уравнение, но с этим числом вместо 3.5.

источник

2013-11-07 12:26:47 Andrew

Большое спасибо! – vlio20

Попробуйте

класса CSS нумерация страницы в центре Используйте Bootstrap как это:

<div class="span12 pagination-centered"> 
    Center content. 
</div>

Класса нумерация страниц в центре уже в bootstrap.css

.pagination-centered{text-align:center;}

В Bootstrap 2.3. 0. используйте класс text-center Но ему необходимо использовать один из двух классов: row или span12 с text-align: center.

DEMO

http://jsfiddle.net/xKSUH/

или

http://jsfiddle.net/xKSUH/1/

Вы можете расположить его в центре с создавая отдельный класс CSS:

.center { 
    margin: 0 auto !important; 
    float: none !important; 
}

DEMO

http://jsfiddle.net/WesWz/9/

источник

2013-11-07 11:56:56

Я думаю, что внутренние пролеты, которые делают проблему – vlio20

Заверните с

<div class="container"> 
</div>

Вам потребуется фиксированная ширина на родителе для его детей центрируются.

источник

2013-11-07 12:00:12 hippojamba

Попробуйте

<div class="row-fluid"> 
<div id="header" class="span12 header text-center"> 
    <div class="">HOME</div> 
    <div class="">PORTFOLIO</div> 
    <div class=""><img src="images/logo.jpg" /></div> 
    <div class="">ABOUT</div> 
    <div class="">CONTACT</div> 
</div> 
</div>

источник

2013-11-07 12:01:40

, теперь она центрирована, но теряет всю текучесть бутстрапа – vlio20

Центр охватывает с начальной загрузкой

ответ

Смежные вопросы