За последние 24 часа нас посетили 21637 программистов и 1689 роботов. Сейчас ищут 1974 программиста ...

Как блок с резиновой ШИРИНОЙ выровнять по центру?

Тема в разделе "HTML и CSS", создана пользователем Catrina, 13 ноя 2015.

  1. Catrina

    Catrina Новичок

    С нами с:
    24 апр 2015
    Сообщения:
    321
    Симпатии:
    0
    Как блок с резиновой шириной выровнять по центру?
    И как вообще сделать блок с резиновой шириной? Я могу его сделать при помощи float: left, но тогда его не выравняешь по центру.
     
  2. VLK

    VLK Старожил

    С нами с:
    15 дек 2013
    Сообщения:
    3.010
    Симпатии:
    58
    Код (Text):
    1. margin: 10px auto;
    вроде как.
     
  3. Catrina

    Catrina Новичок

    С нами с:
    24 апр 2015
    Сообщения:
    321
    Симпатии:
    0
    Про "margin: 0 auto" я уже давно знаю, но это работает, если ширина фиксированная.
    А так блок на всю ширину окна расползётся. Это немножко не то. :)
     
  4. VLK

    VLK Старожил

    С нами с:
    15 дек 2013
    Сообщения:
    3.010
    Симпатии:
    58
    ширина чего? текущего блока, который надо выравнять или вышестоящего?
     
  5. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    Таблицы рулят :D
     
  6. VLK

    VLK Старожил

    С нами с:
    15 дек 2013
    Сообщения:
    3.010
    Симпатии:
    58
  7. Ganzal

    Ganzal Суперстар
    Команда форума Модератор

    С нами с:
    15 мар 2007
    Сообщения:
    9.893
    Симпатии:
    965
    у тебя фиксированная ширина. в заголовке темы кажется КАПСОМ на что-то другое намекают...
     
  8. VLK

    VLK Старожил

    С нами с:
    15 дек 2013
    Сообщения:
    3.010
    Симпатии:
    58
    ну можно указывать ширину в процентах тогда (хотя она опять же останется фиксированной) можно пробовать химичить с Flexbox.

    А как вообще можно выравнивать по центру не фиксированный блок, он же по любому будет на весь экран.
     
  9. Chushkin

    Chushkin Активный пользователь

    С нами с:
    17 дек 2010
    Сообщения:
    1.062
    Симпатии:
    91
    Адрес:
    Мещёра, Центр, Болото N3
    Как-то так:
    Код (PHP):
    1. <div style="text-align: center;"><div style="display: inline-block; width: auto; "></div></div>
     
  10. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    а ты небось и не думала что затронула одну из самых тёмных тем веб-разработки
     
  11. Catrina

    Catrina Новичок

    С нами с:
    24 апр 2015
    Сообщения:
    321
    Симпатии:
    0
    Точно же ожидала :)

    Спасибо) Я знаю, что ранние ИЕ не понимают inline-block, но всё-равно это лучше, чем ничего. ))
     
  12. igordata

    igordata Суперстар
    Команда форума Модератор

    С нами с:
    18 мар 2010
    Сообщения:
    32.408
    Симпатии:
    1.768
    я ещё раз обращаю внимание, что таблица в одну строку решает этот вопрос нативно и во всех браузерах. См вёрстку преславутого вконтактика.
     
  13. Catrina

    Catrina Новичок

    С нами с:
    24 апр 2015
    Сообщения:
    321
    Симпатии:
    0
    Таблицей лучше и кроссбраузерно, беру. ;)
     
  14. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    Код (PHP):
    1. <div style="display:table-cell">div с поведением td или th</div> 
     
  15. Catrina

    Catrina Новичок

    С нами с:
    24 апр 2015
    Сообщения:
    321
    Симпатии:
    0
    Вы пропустили display:, а ещё тут http://htmlbook.ru/CSS/display написано, что об этом свойстве не слышали ИЕ6 и ИЕ7
     
  16. YSandro

    YSandro Старожил

    С нами с:
    7 апр 2011
    Сообщения:
    2.523
    Симпатии:
    2
    У вас начальник юзает IE6? А так ещё в 2012 году пора было сказать до свидания IE8

    И ещё почитайте https://htmlacademy.ru/blog/29
     
  17. Chushkin

    Chushkin Активный пользователь

    С нами с:
    17 дек 2010
    Сообщения:
    1.062
    Симпатии:
    91
    Адрес:
    Мещёра, Центр, Болото N3
    Забудьте про всё, что старше 1 года, если Вам не нужны те пара процентов посетителей, что с этим старьём придут на сайт.