التوسيط في الـ css : الدليل الكامل

السلام عليكم ورحمة الله وبركاته 😊👋

دائمًا معانتي مع التوسيط لا تنتهي. واحب في الغالب اشوف النصوص او الصور في الوسط حتى تكون مرتبة بشكل مميز. وحيث تختلف الاذواق من شخص لآخر، في هذي المقالة احببت تجميع افضل طرق التوسيط واريد منكم ان تشاركوني افضل الطرق لديكم ،

سواء التوسيط :

• الطولي 
• أو العرضي
• أو الطولي العرضي

 

الطريقة الاولى:

مثال على كود Html

<div class="container">
  <div class="lightbox-1">
    هذي الطريقة ممتازة إذا بغيت تدعم المتصفحات القديمة.
  </div>
</div>

<div class="container">
  <div class="lightbox-2">
    ممتازة إذا ما تبغى تدعم المتصفحات القديمة بغض النظر عن العرض.
  </div>
</div>

الطريقة بكود الـ css

.container {
  direction: rtl;
  background-color: #CCC;
  position: relative;
  height: 120px;
  margin: 10px;
}

.lightbox-1 {
  position: absolute;
  width: 400px;
  height: 100px;
  background-color: red;
  color: white;
  top: 10px;
  
  /* 
  التوسيط
  */
  left: 50%;
  margin-left: -200px;
}

.lightbox-2 {
  position: absolute;
  width: 400px;
  height: 100px;
  color: white;
  background-color: blue;
  top: 10px;
  
  /* 
  التوسيط
  */
  transform: translateX(-50%);
  left: 50%;
}

 

يمكنك مشاهدة مثال على الكود كامل هنا

شاركوني كيفية التوسيط في الـ css ولنجعل هذه المقالة مرجع للجميع 👍🤩

كلمات دليلية: centering css css3