.clearer { clear: both; display: block; font-size: 0; line-height: 0; }
<div class="clearer"> </div>
.clearer { clear: both; display: block; font-size: 0; line-height: 0; }
<div class="clearer"> </div>
Если таблицу поместить в блок с CSS-стилем
text-align: center
то желаемого эффекта не произойдет. Многие для выравнивания таблицы по центру используют тег center. Это не самое лучшее решение, так как данный тег является устаревшим.
Выровнять таблицу по центру можно, поместив ее в блок со следующим CSS-стилем:
<div style="margin: 0 auto"> <table> ... </table> </div>
Таким же образом можно отцентрировать и блок внутри блока.
Еще один полезный CSS-стиль третьей версии — border-radius, позволяющий закруглить углы у блока. Браузеры-лидеры последних версий поддерживают данный стиль, Internet Explorer потихоньку подтягивается и в 9 версии также научился закруглять углы.
Пример использования стиля border-radius:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> .box {background: #F2F213; width: 400px; height: 200px;} .round-corners {border-radius: 20px;} </style> </head> <body> <div class="box round-corners"></div> </body> </html>
Один из уроков на сайте был посвящен созданию блока с тенью. В нем предлагалось отрисовать и сверстать тень. С приходом CSS3 веб-дизайнеру стали доступны многие интересные стили, в частности, box-shadow, который позволяет создать тень для блока. В данный момент этот стиль поддерживается всеми современными популярными браузерами.
Пример использования стиля box-shadow:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> .box {background: #F2F213; width: 400px; height: 200px;} .shadow {box-shadow: 5px 5px 10px #777;} </style> </head> <body> <div class="box shadow"></div> </body> </html>
Одним из наиболее простых способов выравнить изображение при применении блочной верстки — поместить его в блок с выравниванием по центру:
<div style="text-align: center"> <img src="pan.jpg" width="400" height="120" alt="Панорама" /> </div>