نص غير مركزي مع محتوى ضبط: مركز

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

تمثل الحاوية المرنة والعناصر المرنة والنص ثلاثة مستويات متميزة في بنية HTML. يؤثر ضبط المحتوى على العناصر المرنة، وليس النص الموجود بداخلها.

إذا كان العنصر المرن يملأ عرض الحاوية الخاصة به، فلا يمكن توسيطه، ومن ثم يكون النص غير محاذي عند الالتفاف.

إلى توسيط النص مباشرة، قم بتعيين محاذاة النص: توسيط العنصر المرن أو الحاوية من خلال الوراثة.

مثال

.box {
  width: 100px;
  height: 100px;
  background-color: lightgreen;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.with-align p {
  text-align: center;
}

  
بعض النصوص الطويلة هنا



  
بعض النصوص الطويلة هنا