^ Наверх
Тегам
apple tv, bootstrap, centos, cheat sheets, chyrp, cms, cp1251, css, css-framework, daos, ddos, denwer, disqus, dns, doodles, efix, endels, evernote, firefox, flash, forex, forex mmcis group, google, google drive, hosts, httrack, hypercomments, input, intensedebate, ipad pro, iphone, iphone 6s, iphone 6s+, jquery, json, lenovo, livejournal, lj, mac os, mac pro, mamp, microtext, monstra cms, ping-admin, reg.ru, selectel, simaphone, stick footer, template cms, textpattern, to do, toup, uptime, utf8, vds, xampp, агс, банковская карта яндекс.денег, блог-клиент, блоггинг, верстка, виртуальный сервер, выравнивание в блоке, гидеон сундбек, гоша, дудлы, задачка, идея, инвестиции, интернет-магазин, кино, клиенты, кодировка, комменты, кросспостинг, микро cms, молния, мониторинг, мотив, мошенники, наверх, облако, обои, оптимизация, оффлайн, оффтоп, ошибки, платон, почта для домена, прижать футер, проверка flash, рип сайта, сателлиты, ссср, старт, техника, управление временем, успехи, фотоальбом, фоторепортаж, хостинг, цели, шпаргалки, шпоры, электронные деньги, яндекс, яндексдиск, яндекс мерика, яша
Сортировать по:

Выравнивание содержания <div> по вертикали и горизонтали

Я как и многие не являюсь сторонником табличной верстки, точнее, я ее просто ненавижу. Было у меня пару моментов, когда я брался делать сайты по табличным шаблонам. В итоге, у меня нервов не хватало править бесконечные <tr> и <td>, просчитывая какие столбцы и колонки объединить или разделить. Все это усугублялось тем, что я не люблю пользоваться визуальными редакторами, а текстовые не позволяют воспринимать это нагромождение тэгов как единое строение страницы. Но в отличие от дивной верстки у таблиц есть одно преимущество - у них нет проблем с позиционированием и выравниванием, свойство vertical-align и атрибут valign работают безотказно. А вот с <div> - ами у меня постоянно возникали заморочки. Если с горизонтальным выравниванием попроще, в принципе, в большинстве случаев можно воспользоваться align, то с вертикальным дела "швах". Но есть интересные решения, трюки css, которые позволяют добиться нужного результата.

Итак, для того чтобы выровнять содержимое блока по вертикали, нужно сделать высоту строки одинаковую в высотой блока. Пример,

<div style = "height:50px; line-height:50px;">Какой то текст...</div>

Если align не срабатывает, то содержимое блока по горизонтали можно выровнять так,

<div style = "width:500px; margin: 0px auto;">Какой то текст...</div>

Высота блоков бывает разная, да и содержание разное так, что в некоторых случаях требуется отцентровать содержимое по горизонтали и по вертикали, тогда можно воспользоваться таким решением,

<div>
     <div style="width: 500px; height: 300px; left: 50%; top: 50%; position: relative; margin-left: -250px; margin-top: -150px;">
          Блок с содержанием текста или графики
     </div>
</div>

В этом случае используется вложенность в родительский <div>. Но даже при этом всем, есть браузеры, которые просто так не победить - это всеми любимый "ослик" (IE), его старые версии. По мне так самый "уебищный" (извиняюсь за выражение) браузер. И какого х... Русь-матушка к нему привязалась? Все этот Microsoft дебильный навязал. До сих пор отмахаться не можем. Чтобы укротить этого зверя придется воспользоваться дополнительными свойствами типа display: table | table-cell. А по мне так: "Идет он в жопу!".


comments powered by HyperComments

Оставьте комментарий