Форум русской поддержки Joomla!® CMS
08.12.2016, 18:19:27 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Как выровнять по центру страницы блоки с float: left или display: inline-block?

 (Прочитано 15126 раз)
0 Пользователей и 1 Гость смотрят эту тему.
zvi
Завсегдатай
*****

Репутация: +4/-0
Offline Offline

Сообщений: 409


« : 17.06.2014, 00:05:06 »

 Smileyкак выровнять по центру страницы блоки с float: left или display: inline-block
если страница или наружный блок резиновый?
нужен на  блоки с float: left предпочтение, это возможно?
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #1 : 17.06.2014, 00:11:25 »

Float не нужен. Хотя возможно решение и с ним посредством отрицательных отступов. Но проще всего: width:100% + display:inline-block + text-align:center родителю.
Записан
zvi
Завсегдатай
*****

Репутация: +4/-0
Offline Offline

Сообщений: 409


« Ответ #2 : 17.06.2014, 00:54:12 »

Float не нужен. Хотя возможно решение и с ним посредством отрицательных отступов. Но проще всего: width:100% + display:inline-block + text-align:center родителю.
с float: left если блоки при внешнем динамическом (резиновом) блоке никак не получится?
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #3 : 17.06.2014, 01:00:39 »

Получится. Оборачиваете отдельным дивом, сдвигаете ВПРАВО на 50%. Затем ваши блоки сдвигаете влево на 50%. Старый приём.
Записан
zvi
Завсегдатай
*****

Репутация: +4/-0
Offline Offline

Сообщений: 409


« Ответ #4 : 17.06.2014, 01:02:23 »

Float не нужен. Хотя возможно решение и с ним посредством отрицательных отступов. Но проще всего: width:100% + display:inline-block + text-align:center родителю.
то у меня есть блоки с display:inline-block фиксированные по размеру (ширине) мне нужно выровнять их на резиновой странице
Записан
zvi
Завсегдатай
*****

Репутация: +4/-0
Offline Offline

Сообщений: 409


« Ответ #5 : 17.06.2014, 01:05:51 »

Получится. Оборачиваете отдельным дивом, сдвигаете ВПРАВО на 50%. Затем ваши блоки сдвигаете влево на 50%. Старый приём.
каждый блок с float: left обернуть еще в div и дальше что? я не понял
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #6 : 17.06.2014, 01:06:34 »

Вы определитесь, каким путём идте Smiley. Можно с float и без. Я бы без делал. Тогда достаточно указать выравнивание текста и ширину блока.
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #7 : 17.06.2014, 01:07:58 »

каждый блок с float: left обернуть еще в div и дальше что? я не понял
Не каждый, а все. Контейнер сделать. Он у вас будет выносить блоки за пределы родителя так, что встанет ровно посередине страницы, грубо говоря. А потом потомков обратно на половину ширины. И блоки будут посередине.
Записан
zvi
Завсегдатай
*****

Репутация: +4/-0
Offline Offline

Сообщений: 409


« Ответ #8 : 17.06.2014, 01:14:00 »

Не каждый, а все. Контейнер сделать. Он у вас будет выносить блоки за пределы родителя так, что встанет ровно посередине страницы, грубо говоря. А потом потомков обратно на половину ширины. И блоки будут посередине.
наружному и внутренними с float: left что присвоит
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #9 : 17.06.2014, 01:15:54 »

Не понял вопроса. Присвоить отрицательные отступы.
Записан
zvi
Завсегдатай
*****

Репутация: +4/-0
Offline Offline

Сообщений: 409


« Ответ #10 : 17.06.2014, 01:21:11 »

Не понял вопроса. Присвоить отрицательные отступы.
буду побывать что то у меня не выходит репу добавлю за внимания спс
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #11 : 17.06.2014, 02:04:32 »

У вас тут вообще просто всё. Блоки ровно делят контейнер на части.



Код
<body>
<p>Способ с инлайн-блоками</p>
<div class="cont" id="inln">
<div class="block"><div>первый</div></div>
<div class="block"><div>второй</div></div>
<div class="block"><div>третий</div></div>
</div>
 
<p>Способ с плавающими блоками</p>
<div class="cont" id="flt">
<div class="cont-wrap">
<div class="block"><div>первый</div></div>
<div class="block"><div>второй</div></div>
<div class="block"><div>третий</div></div>
</div>
</div>
 
</body>

Код
* {margin:0; padding:0}
body {padding:50px;}
.cont {background:#eee;}
#inln {word-spacing:-50px;}
.block {word-spacing:0; width:33.333%;}
#inln .block {display:inline-block;}
.block div {margin:10px; background:#fcc;}
 
#flt {overflow:hidden;}
#flt .block {float:left;}
Записан
zvi
Завсегдатай
*****

Репутация: +4/-0
Offline Offline

Сообщений: 409


« Ответ #12 : 17.06.2014, 12:40:40 »

У вас тут вообще просто всё. Блоки ровно делят контейнер на части.






Код
<body>
<p>Способ с инлайн-блоками</p>
<div class="cont" id="inln">
<div class="block"><div>первый</div></div>
<div class="block"><div>второй</div></div>
<div class="block"><div>третий</div></div>
</div>
 
<p>Способ с плавающими блоками</p>
<div class="cont" id="flt">
<div class="cont-wrap">
<div class="block"><div>первый</div></div>
<div class="block"><div>второй</div></div>
<div class="block"><div>третий</div></div>
</div>
</div>
 
</body>

Код
* {margin:0; padding:0}
body {padding:50px;}
.cont {background:#eee;}
#inln {word-spacing:-50px;}
.block {word-spacing:0; width:33.333%;}
#inln .block {display:inline-block;}
.block div {margin:10px; background:#fcc;}
 
#flt {overflow:hidden;}
#flt .block {float:left;}

на практике что то не получилось не знаешь как справится с этими объявлениями div .asdo что бы по центру были при изменении страницы желательно с float: left  , на худой конец и с  display:inline-block пройдет вhttp://tandem.romnu.com.ua/ что бы были по центру как http://romnu.com.ua/
« Последнее редактирование: 17.06.2014, 12:44:04 от zvi » Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #13 : 17.06.2014, 21:46:15 »

Нехило так намутили там. Вот так можно, например:

Показать текстовый блок

Код
.adsmanager_table {word-spacing:-100px;}
.adsmanager_table_description {word-spacing:0; vertical-align:top; display:inline-block; width:33.333%;}
.adsmanager_table_description > div {width:auto; margin:5px; padding:5px;}
.adsmanager_table_description .btn-successs {margin:0;}
Записан
sportboy
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 5


« Ответ #14 : 08.04.2016, 20:05:47 »

Вы определитесь, каким путём идте Smiley. Можно с float и без. Я бы без делал. Тогда достаточно указать выравнивание текста и ширину блока.

Здравствуйте, нашел Ваш форум. Очень нужен Ваш совет специалиста, как выровнять два блока по центру в моем случаи.
Изначально в шаблоне цена и вес выводятся в одну строку по разные стороны. Вот так: http://upload.akusherstvo.ru/image988193.jpg
Очень большое расстояние между ценой и весом.
Нужно, вывести цену и вес в одну строку по центру. Вот так: http://upload.akusherstvo.ru/image988194.jpg

НО, нужно решение, как это можно сделать с помощью только стилей CSS, без изменения кода html в файлах шаблона. (Потому как, если менять HTML, это придется делать это в десятках файлов: категории, поиск, и во все модулях, которые выводят товары, везде ковырять html).
Спасибо, очень буду признателен, если Вы подскажите, как это сделать?
Ссылка на страницу тут.
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #15 : 08.04.2016, 20:13:22 »

Код
.product .weight {
   width:50%;
   text-indent:10px;
}
.product .price {
   width:50%;
   text-align:right;
}
.product .price > * {
   padding-right: 10px;
}

Записан
sportboy
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 5


« Ответ #16 : 08.04.2016, 20:18:32 »


Спасибо, за Ваш совет, но получается не ровно по центру. Я много вариантов пробовал. Если указывать ширину 50% ровно не выходит. Так как размер контента в блоке с ценой больше, чем в блоке с весом. + цена может быть разная и разной длины.
« Последнее редактирование: 08.04.2016, 20:21:40 от sportboy » Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #17 : 08.04.2016, 20:19:42 »

Вообще идеально ровно по-центру. Если вам нужно распределение, то это уже другое. Ща попробую намутить чего-нить.
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #18 : 08.04.2016, 20:26:03 »

Код
.product .price,
.product .weight {
display:inline-block;
float:none;
padding:0 10px;
text-align:center;
}
.product .desc {
text-align:center;
}

Записан
sportboy
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 5


« Ответ #19 : 08.04.2016, 20:31:08 »

да, этот вариант я пробовал, но мне нужно как на примере, чтобы была цена потом вес. А тут на оборот выходит.
Скажите, пожалуйста, а если для блока <div class="price"> сделать тоже float: right а для кнопки прописать clear:both чтобы не улетала.
Получится, что цена и вес по правую сторону в плотную станут. А как их потом по центру выровнять, чтобы автоматом подстраивалось?
Записан
sportboy
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 5


« Ответ #20 : 08.04.2016, 20:37:13 »

Скажите, пожалуйста, получается, никак невыйдет одним CSS так сделать, чтобы было по центру и в нужном порядке цена а потом вес?
Придется все таки переделывать HTML чтобы в коде порядок был другой да?
Сейчас так
<div class="weight>за 1 кг</div>
<div class="price">1 700 руб.</div>
А придется делать так
<div class="price">1 700 руб.</div>
<div class="weight>за 1 кг</div>

И тогда последний код который Вы прописали подойдет. Но блине, это 10 файлов править придется.
Мне сказали что есть способ в моем случаи только с помощью CSS так сделать. Но не могут найти как.
Записан
sportboy
Новичок
*

Репутация: +0/-0
Offline Offline

Сообщений: 5


« Ответ #21 : 08.04.2016, 21:07:03 »

Код
.product .price,
.product .weight {
display:inline-block;
float:none;
padding:0 10px;
text-align:center;
}
.product .desc {
text-align:center;
}

Выравнялось так как я хочу. Но вес стал с левой стороны, а цена с правой. А должно наоборот быть так: http://upload.akusherstvo.ru/image988194.jpg вес цена
Уточните, пожалуйста, как Вы считаете, чтобы вес цена были подряд, нужно только править HTML местами менять вывода да? Или все таки стилями можно поменять местами их и также выровнять как вы выровняли?
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #22 : 09.04.2016, 01:49:11 »

В том виде, что сейчас, без правки разметки не обойтись.
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet