مشكلة ضبط موضع الصورة واسم المستخدم في مستوى الكتابة في كود HTML و CSS

سأوضح لك بمثال كيف يمكن تنسيق الصورة مع النص.

HTML:

<div class="user-profile">
  <img src="path/to/image.jpg" alt="صورة المستخدم">
  <span class="username">اسم المستخدم</span>
</div>

CSS:

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px; /* المسافة بين الصورة واسم المستخدم */
}

.username {
  font-size: 18px; /* حجم الخط لاسم المستخدم */
}

قمت بإنشاء عنصر div بالصفات user-profile والذي يحتوي على الصورة واسم المستخدم.

واستخدمت تنسيقات CSS لتطبيق display: flex على العنصر الأب user-profile لتحقيق توزيع المحتوى في مستوى واحد.

وحددت align-items: center لمحاذاة العناصر عموديًا، و gap لتحديد المسافة بين الصورة واسم المستخدم.

وتستطيع ضبط قيم التنسيق وفقًا لاحتياجاتك، مثل تغيير حجم الخط أو المسافة بين العناصر، وعليك بتعديل المسار path/to/image.jpg ليتناسب مع موقع الصورة.

لتلافي حدوث مثل هاته المشكلة قم بوضع كل من الصورة والنص في حاوية مرنة يتم تطبيق التنسيق display flex عليها، ويتم ضبط قيمة align-items لديها بـ center:

<div>
   <h2>hey</h2>
   <img src="path/to/image" />
</div>

div{
  display: flex;
  align-items: center;
}

الخاصية align-items

شكرا اخي