Як div вирівняти по центру

Як div вирівняти по центру

Сучасні стандарти розмітки сторінок не забороняють використання табличної верстки, тим не менш, верстка шарами, по суті, стала обов’язковим стандартом при створенні сайтів. Крім очевидних переваг, витіснення табличної верстки принесло і деякі нові великі і маленькі проблеми. Одна з них — горизонтальне вирівнювання структури блоків в сторінці. Розглянемо пару практичних способів встановити шар по центру ширини сторінки.

Вам знадобиться

Початкові знання мови HTML

Інструкція

  1. Один з варіантів вирішення завдання вирівнювання якого або шару (блоку DIV) по центру вікна відкритої сторінки обходиться тільки засобами HTML (HyperText Markup Language — «мова розмітки гіпертексту»). Потрібно помістити блок всередину тега <center>. Найпростіший код сторінки, зверстаний таким способом, може виглядати, наприклад, так:

    <! DOCTYPE HTML PUBLIC «- / / W3C / / DTD HTML 4.1 Transitional / / EN» «http://www.w3.org/TR/HTML4/strict.dtd»>

    <html>

    <head>

     <title> Вирівнювання DIV по центру </ title>

    </ Head>

    <body>

    <center>

     <div style=»margin:auto; width:300px; height:100px; background:#CC0;»> </ div>

    </ Center>

    </ Body>

    </ Html>
  2. Інший варіант використовує кошти CSS (Cascading Style Sheets — «каскадні таблиці стилів»). У стилі вирівнюючого шару треба задати автовизначення величини відступу від меж вікна. Код такої сторінки в простому вигляді може бути, наприклад, таким:

    <! DOCTYPE HTML PUBLIC «- / / W3C / / DTD HTML 4.1 Transitional / / EN» «http://www.w3.org/TR/HTML4/strict.dtd»>

    <html>

    <head>

     <title> Вирівнювання DIV по центру </ title>

    </ Head>

    <body>

    <div style=»width:300px; height:100px; background:#fc0; margin: 0 auto;»> </ div>

    </ Body>

    </ Html>