التخطيط الجدولي

تحدد الخاصية empty-cells ما إذا كانت الخلايا الفارغة ستُعرض أم لا، ولا يكون لها أثرٌ إلا إذا كانت قيمة الخاصية border-collapse هي separate، وتأخذ إحدى

التخطيط الجدولي

الخاصية table-layout

تُستخدم الخاصية table-layout لتحديد كيفية إنشاء الجدول ووضع العناصر بداخله، وتأخذ إحدى القيمتين:

1. auto: وتسمح للجدول بأخذ العرض اللازم لمنع طفحان المحتوى خارج الجدول.
2. fixed: وتُعطي الجدول العرض المحدد له بالخاصية width فقط، ولا تسمح له بالتمدد مما يؤدي لطفحان المحتوى خارج الجدول في حال عدم وجود مساحة كافية له.

الخاصية empty-cells

تحدد الخاصية empty-cells ما إذا كانت الخلايا الفارغة ستُعرض أم لا، ولا يكون لها أثرٌ إلا إذا كانت قيمة الخاصية border-collapse هي separate، وتأخذ إحدى القيمتين show والتي تعني إظهار الخلايا الفارغة أو hide والتي تعني إخفائها.

 

الخاصية border-collapse

تحدد الخاصية border-collapse ما إذا كان إطار الجدول منفصلًا عن إطار الخلايا (أي لكلٍ واحدٍ منها إطارٌ خاصٌ به) أم أنه مدمج معها (أي تتشارك الخلايا المتجاورة الإطار مع بعضها بعضًا)، وتأخذ إحدى القيمتين separate والتي تفصل بين الإطارات أو collapse والتي تدمج اطارات الخلايا المتجاورة.

الخاصية border-spacing

الخاصية border-spacing في CSS تُحدِّد المسافة بين إطارات خلايا الجداول المتجاورة. لن يكون لهذه الخاصية أثرٌ إلا إذا كانت قيمة الخاصية border-collapse هي separate. ويمكن تحديد المسافات الأفقية والرأسية بين الإطارات في آن واحد عن طريق تحديد قيمة واحدة للخاصية مثل border-spacing: 2px، أو تحديد قيمة مختلفة لكل واحدة على حدة مثل border-spacing: 2px 4px، حيث تمثل القيم الأولى المسافة بين الإطارات الأفقية وتحدد القيمة الثانية المسافة بين الإطارات الرأسية.

الخاصية caption-side

تحدد الخاصية caption-side موضع لافتة الجدول المُعرَّفة عبر العنصر <caption>، وتأخذ إحدى القيمتين top والتي تُضيف اللافتة أعلى الجدول أو bottom والتي تُضيفها أسفل الجدول.

التخطيط الكتلي السطري (Inline-block layout)

إنشاء شريط تَنَقُّل علوي (navigation bar)

من الشائع انشاء شريط تَنَقُّل علوي يحتوي على ازار للتنقل بين صفحات الموقع المختلفة، وفيه تكون المسافات بين الأزرار متساوية، ويكون للزر الأول فيه هامش أيمن فقط (وأيسر إذا كانت الصفحة باللغة العربية)، ولآخر زر هامش أيسر فقط (وأيمن إذا كانت الصفحة باللغة العربية).

مثال

• ملف HTML

  <nav>
      <ul>
          <li>abc</li>
          <li>abcdefghijkl</li>
          <li>abcdef</li>
      </ul>
  </nav>



• ملف CSS

  nav {
      width: 100%;
      line-height: 1.4em;
  }
  ul {
      list-style: none;
      display: block;
      width: 100%;
      margin: 0;
      padding: 0;
      text-align: justify;
      margin-bottom: -1.4em;
  }
  ul:after {
      content: "";
      display: inline-block;
      width: 100%;
  }
  li {
      display: inline-block;
  }

• استُعملت العناصر nav، وul، وli لمعناها الدلالي فقط (عناصر قائمة التنقل)، ويمكن استعمال أي عناصر أخرى.
• استُخدمت قيمة سالبة مساوية لقيمة ارتفاع السطر للخاصية margin-bottom للتخلص من المساحة الفارغة التي يتسبب فيها العنصر الزائف after:.
• اذا تقَّلص عرض الصفحة لحد لا يسمح بأن تكون جميع العناصر في سطر واحد، يتنقل جزء من العناصر للسطر التالي.

التوسيط (Centering)

توسيط العناصر باستخدام حاوية Flexbox) Flex)

• ملف HTML:



  <div class="container">
    <img src="http://lorempixel.com/400/200" />
  </div>



• ملف CSS:

  html,
  body,
  .container {
    height: 100%;
  }
  .container {
    display: flex;
    justify-content: center; /* التوسيط أفقيًا */
  }
  img {
    align-self: center; /* التوسيط رأسيًا */
  }

عرض النتيجة

• ملف HTML:



  <img src="http://lorempixel.com/400/400" />



• ملف CSS:

  html,
  body {
    height: 100%;
  }
  body {
    display: flex;
    justify-content: center; /* التوسيط أفقيًا */
    align-items: center; /* التوسيط رأسيًا */
  }

عرض النتيجة

دعم المتصفحات

1. كل المتصفحات الرئيسية تدعم حاوية flex، عدا الإصدارات التي تسبق الإصدار العاشر من متصفح IE.
2. بعض إصدارات المتصفحات، مثل Safari 8 و IES10، تتطلب استخدام البوادئ الخاصة بها vendor prefixes.
3. لتوليد البوادئ بشكل تلقائي يمكن استعمال أداة  Autoprefixer.
4. يمكن تعويض نقص دعم المتصفحات القديمة (مثل IE8 وIE9) لحاوية flex بإضافة شيفرات خاصة.

توسيط العناصر باستخدام تحويلات CSS Transform) CSS)

تعتمد تحويلات CSS على أحجام العناصر. إذا كنت لا تعرف طول أو عرض العنصر، اتَّبع الخطوات التالية لتوسيطه أفقيًا ورأسيًا:

1. طبِّق القاعدة position: absolute على العنصر المراد توسيطه.
2. حدد القيمة %50 للخاصيتين top و left.
3. طبِّق القاعدة (%50- ,%50-)transform: translate.

خذ في الحسبان أن استعمال هذه الطريقة قد يؤدي إلى ظهور العنصر المراد توسيطه مشوشًا، وذلك بسبب عرضه على بكسلات ذات قيم غير حقيقية (تحتوي على أرقام كسرية مثل 5.6). انظر.

• ملف HTML:



  <div class="container">
    <div class="element"></div>
  </div>



• ملف CSS:

  .container {
    position: relative;
  }

  .element {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

عرض المثال على JSFiddle

معلومات إضافية

1. يُحدد موضع العنصر وفقًا لأول أب غير ثابت، أي قيمة الخاصية position له هي relative أو absolute أو fixed استكشف المزيد على fiddle.
2. للتوسيط أفقيًا فقط، استعمل left: 50% و (transform: translateX(-50%. كذلك للتوسيط رأسيًا فقط استعملtop: 50% و (transform: translateY(-50%.
3. استعمال عناصر ذات عرض أو ارتفاع غير ثابت مع طريقة التوسيط هذه قد يجعل العنصر المراد توسيطه يبدو مضعوطاً. غالباً ما يحدث هذا مع العناصر التي تحتوي على نصوص، ويمكن معالجتها بإضافة القواعد: ;margin-right: -50% و margin-bottom: -50%. لمزيد من المعلومات اطّلع على المثال التالي.

ملاحظة: إذا كانت الصفحة باللغة العربية أو إحدى اللغات الأخرى التي تُكتب من اليمين إلى اليسار (rtl) تستبدل القاعدة left: 50% بالقاعدةright: 50%.

التوسيط باستخدام الخاصية margin

يمكن توسيط العناصر باستخدام ;margin: 0 auto إذا كانت عناصر كتليه ولها عرض محدد.

• ملف HTML



  <div class="containerDiv">
    <div id="centeredDiv"></div>
  </div>

  <div class="containerDiv">
    <p id="centeredParagraph">This is a centered paragraph</p>
  </div>

  <div class="containerDiv">
    <img
      id="centeredImage"
      src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_
  800/qqyvc3bkpyl3mfhr8all.jpg"
    />
  </div>



• ملف CSS:

  .container {
    width: 100%;
    height: 100px;
    padding-bottom: 40px;
  }

  #centeredDiv {
    margin: 0 auto;
    width: 200px;
    height: 100px;
    border: 1px solid #000;
  }

  #centeredParagraph {
    width: 200px;
    margin: 0 auto;
  }

  #centeredImage {
    display: block;
    width: 200px;
    margin: 0 auto;
  }

النتيجة:

اطّلع على تجربة حيّة لهذا المثال على JSFiddle.

التوسيط باستخدام محاذاة النص text-align

من أسهل أنواع التوسيط وأكثرها انتشارًا توسيط النصوص داخل عنصر معين باستخدام ;text-align: center.

• ملف HTML:



  <p>lorem ipsum</p>



• ملف CSS:

  p {
    text-align: center;
  }

تستعمل text-align لمحاذاة المحتوى السطري (inline-content) فقط مثل محاذاة النصوص والصور داخل العنصر الأب لها، ولا يمكن استعمالها لتوسيط العناصر الكتلية.

استخدام الموضع المطلق (position: absolute)

• تعمل على المتصفحات القديمة (IE >= 8)

يمكن توسيط عنصر ذي موضع مطلق داخل العنصر الأب له باستعمال الهوامش التلقائية مع وضع قيمة صفر لكل من الخواص left، وright، وtop، و bottom.

• ملف HTML



  <div class="parent">
    <img class="center" src="http://lorempixel.com/400/200" />
  </div>



• ملف CSS:

  .parent {
    position: relative;
    height: 500px;
  }

  .center {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

تحتاج العناصر التي لا تمتلك ارتفاعًا وعرضًا ضمنيين مثل الصور إلى تحديد قيمتهما.

مصادر أخرى: Absolute Centering in CSS.

التوسيط باستخدام الدالة ()calc

دالة calc()‎ هي صيغة جديدة تمت إضافتها في CSS3. تمكنك هذه الدالة من أن تحسب رياضيًا الحجم أو الموضع الذي يشغله العنصر باستخدام عدد من القيم مثل: البكسلات (نقاط الشاشة)، النسب المئوية …الخ.

ملاحظة: عند استخدام هذه الدالة، يجب مراعاة المسافة بين القيمتين (calc(100% - 80px .

• ملف HTML

  <div class="center"></div>



• ملف CSS

  .center {
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
    top: calc(50% - 50px / 2); /* الإرتفاع مقسوم على 2 */
    left: calc(50% - 50px / 2); /* العرض مقسوم على 2 */
  }

توسيط النص رأسيًأ باستخدام ارتفاع السطر (line-height)

يمكن استخدام خاصية ارتفاع السطر line-height لتوسيط نص من سطر واحد رأسيًا داخل الحاوية.

div {
  height: 200px;
  line-height: 200px;
}

قد لا يبدو ذلك أنيقًا، ولكن قد يكون مفيد إذا أردت توسيط النص رأسيًا داخل عنصر </ input>. خاصية line-height تعمل فقط إذا كان النص المراد توسيطه من سطر واحد، ولكن إذا كان أكثر من سطر لن يكون الناتج في الوسط.

محاذاة أي شيء رأسيًا في ثلاثة أسطر

يمكنك باستعمال الثلاثة أسطر أدناه توسيط أي شيء رأسيًا، فقط تأكد أن الحاوية (div) أو الصورة التي تطبق عليها الشيفرة لها أب (parent) ذو ارتفاع محدد.

• ملف CSS:



  div.vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }



• ملف HTML:

  <div class="vertical">Vertical aligned text!</div>

عرض النتيجة.

التوسيط نسبةً لعنصر آخر

ستتعلم في هذا القسم كيفية توسيط المحتوى استنادًا إلى ارتفاع عنصر مجاور.

متوافق مع IE 8 والإصدارات التي تليه، بالإضافة لكل المتصفحات الحديثة.

• ملف HTML:

  <div class="content">
    <div class="position-container">
      <div class="thumb">
        <img src="http://lorempixel.com/400/200" />
      </div>
      <div class="details">
        <p class="banner-title">text</p>
        <p class="banner-text">content content content content</p>
        <button class="btn">button</button>
      </div>
    </div>
  </div>



• ملف CSS:

  .content * {
    box-sizing: border-box;
  }

  .content .position-container {
    display: table;
  }

  .content .details {
    display: table-cell;
    vertical-align: middle;
    width: 33.33333%;
    padding: 30px;
    font-size: 17px;
    text-align: center;
  }

  .content .thumb {
    width: 100%;
  }

  .content .thumb img {
    width: 100%;
  }

اطّلع على تجربة حيّة لهذا المثال على JSFiddle.

النقاط الرئيسية هي الحاويات الثلاث thumb.، و details.، و position-container.:

1. يجب أن تمتلك الحاوية position-container. القاعدة display: table.
2. يجب أن تمتلك الحاوية details. الخصائص width و display: table-cell، و vertical-align: middle.
3. يجب أن تمتلك الحاوية thumb. القاعدة width: 100% إذا كنت تريدها أن تأخذ كل المساحة المتبقية، وستكون محددة بعرض حاوية details..
4. يجب أن تكون الصورة (في حال كان لديك صورة) داخل الحاوية thumb. ويجب أن تمتلك القاعدة width: 100%، لكنها غير ضرورية إذا كان لديك تناسب صحيح.

طريقة العنصر الشبح (خدعة Michat Czernow)

يمكن استعمال هذة الطريقة حتى إذا كانت أبعاد الحاوية مجهولة.

قم بإنشاء عنصر "شبح" بارتفاع 100% داخل الحاوية التي تريد توسيطها، ومن ثم طبق القاعدة vertical-align: middle عليه وعلى الحاوية المراد توسيطها.

• ملف CSS:

  /* يُمكن أن يأخذ العنصر الأب أي ارتفاع وعرض */
  .block {
    text-align: center;

    /* انظر الملاحظة رقم 1 */
    white-space: nowrap;
  }

  /* The ghost element */
  .block:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;

    /* انظر الملاحظة رقم 2 */
    margin-right: -0.25rem;
  }

  /* The element to be centered, can also be of any width and height */
  .centered {
    display: inline-block;
    vertical-align: middle;
    width: 300px;
    white-space: normal; /* Resetting inherited nowrap behavior */
  



• يكون عرض الحاوية في بعض الأحيان أقل من عرض العناصر الداخلية لها مما يؤدي إلى قص أجزاء منها، ويمكنك إضافة القاعدة white-space: nowrap لتفادي هذا الأمر.
• يتسبب حرف المسافة الخاص بالعنصر الشبح في وجود فراغ بينه وبين الحاوية centered.، للتخلص من هذا الفراغ يمكن دفع الحاوية centered. إلى اليمين (أو إلى اليسار في حالة الصفحات العربية) قليلًا (تعتمد المسافة التي يجب دفع الحاوية بها على نوع الخط المستخدم في الصفحة) أو عن طريق تحديد قيمة صفر لخاصية font-size في الحاوية parent. ومن ثم إعادة تعيينه في الحاوية centered..


• ملف HTML:

  <div class="block">
    <div class="centered"></div>
  </div>




التوسيط أفقيًا ورأسيًا دون القلق بشأن ارتفاع وعرض العنصر




الطريقة التالية تمكنك من إضافة المحتوى إلى عنصر HTML و توسيطه أفقيًا ورأسيًا دون القلق بشأن ارتفاعه أو عرضه.

الحاوية الخارجية



• يجب أن تمتلك القاعدة display: table.



الحاوية الداخلية



• يجب أن تمتلك القواعد التالية

display: table-cell;
vertical-align: middle;
text-align: center;




صندوق المحتوى



1. يجب أن يمتلك القاعدة display: inline-block.
2. يجب إعادة ضبط محاذاة النص، مثلاً text-align-left أو text-align: right، إلا إذا كنت ترغب في أن يكون النص في الوسط.



إليك المثال التالي:



• ملف HTML:



  <div class="outer-container">
    <div class="inner-container">
      <div class="centered-content">
        You can put anything here!
      </div>
    </div>
  </div>



• ملف CSS

  body {
    margin: 0;
  }

  .outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
  }

  .inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

  .centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
  }




اطّلع على تجربة حيّة لهذا المثال على  JSFiddle.




محاذاة صورة رأسيًا داخل حاوية div



• ملف HTML:

  <div class="wrap">
    <img src="http://lorempixel.com/400/200" />
  </div>



• ملف CSS:



  .wrap {
    height: 50px;
    width: 100px;
    border: 1px solid blue;
    text-align: center;
  }

  .wrap:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 1px;
  }

  img {
    vertical-align: middle;
  }




التوسيط مع حجم ثابت




إذا كان حجم المحتوى ثابتًا، يمكن تعيين قيمة الموضع المطلق بالقيمة 50% مع هوامش تُقلص نصف عرض وارتفاع المحتوى.

• ملف HTML

  <div class="center">
    Center vertically and horizontally
  </div>



• ملف CSS:

  .center {
    position: absolute;
    background: #ccc;

    left: 50;
    width: 150px;
    margin-left: -75px; /* width * -0.5 */

    top: 50%;
    height: 200px;
    margin-top: -100px; /* height * -0.5 */
  }




التوسيط أفقيًا مع عرض ثابت




يمكنك توسيط العنصر أفقيًا حتى إذا لم تكن تعرف إرتفاع محتواه.



• ملف HTML:

  <div class="container">
    Center only horizontally
  </div>



• ملف CSS:

  .center {
    position: absolute;
    background: #ccc;

    left: 50%;
    width: 150px;
    margin-left: -75px; /* width * -0.5 */
  }




التوسيط رأسيًا مع ارتفاع ثابت




يمكنك توسيط العنصر رأسيًا إذا كنت تعرف فقط إرتفاعه.



• ملف HTML:

  <div class="center">
    Center only vertically
  </div>



• ملف CSS:

  .center {
    position: absolute;
    background: #ccc;

    top: 50%;
    height: 200px;
    margin-top: -100px; /* width * -0.5 */
  }




المحاذاة الرأسية للعناصر ذات الارتفاع الديناميكي




تطبيق CSS بشكل بديهي لا يعطي النتائج المطلوبة وذلك للأسباب الآتية:



1. قاعدة vertical-align: middle لا تنطبق على العناصر الكتلية.
2. قاعدة margin-top: auto و margin-bottom: auto تُحسب القيم المستخدمة لها كأصفار.
3. قاعدة margin-top: -50% يتم حساب قيمة الهامش على أساس النسبة المئوية بالنسبة لعرض الكتلة التي تحويها.



للحصول على دعم أغلب المتصفحات، هناك حل بديل باستخدام العناصر المساعدة:



• ملف HTML

  <div class="vcenter--container">
    <div class="vcenter--helper">
      <div class="vcenter--content">
        <!-- stuff -->
      </div>
    </div>
  </div>



• ملف CSS:

  .vcenter--container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
  }

  .vcenter--helper {
    display: table-cell;
    vertical-align: middle;
  }

  .vcenter--content {
    margin: 0 auto;
    width: 200px;
  }




 - المثال على  JSFiddle.




1. تعمل هذه الطريقة مع العناصر ذات الارتفاعات الديناميكية.

2. تأخذ في الاعتبار تدفق المحتوى .

3. مدعومة من قبل معظم المتصفحات.




التوسيط أفقيًا ورأسيًا باستخدام تخطيط الجدول




يمكن ببساطة توسيط العنصر الإبن باستخدام القاعدة display: table.



• ملف HTML:

  <div class="wrapper">
    <div class="parent">
      <div class="child"></div>
    </div>
  </div>



• ملف CSS:

  .wrapper {
    display: table;
    vertical-align: center;
    width: 200px;
    height: 200px;
    background-color: #9e9e9e;
  }

  .parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

  .child {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 100px;
    height: 100px;
    background-color: teal;
  }




التوسيط باستخدام العناصر الزائفة



• ملف HTML

  <div class="wrapper">
      <div class="content"></div>
  </div>



• ملف CSS

  .wrapper{
      min-height: 600px;
  }
  .wrapper:before{
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
  }
  .content {
      display: inline-block;
      height: 80px;
      vertical-align: middle;
  }

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا