تعد الصور جزءًا مهمًا من أي تطبيق ويب. لا يُنصح بشكل عام بتضمين الكثير من الصور في تطبيق الويب، ولكن من المهم استخدام الصور حيثما تكون مطلوبة. يساعدنا CSS في التحكم في عرض الصور في تطبيقات الويب.

تعني محاذاة الصورة وضع الصورة في المنتصف واليسار واليمين. يمكننا استخدام يطفو الملكية و محاذاة النص خاصية محاذاة الصور.

إذا كانت الصورة موجودة في عنصر div، فيمكننا استخدام محاذاة النص خاصية محاذاة الصورة في div.

مثال

في هذا المثال، نقوم بمحاذاة الصور باستخدام محاذاة النص ملكية. الصور موجودة في عنصر div.

 div { border: 2px solid red; } img{ height: 250px; width: 250px; } #left { text-align: left; } #center { text-align: center; } #right{ text-align: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp"> 

اختبره الآن

انتاج |

باستخدام خاصية تعويم

الخاصية العائمة في CSS هي خاصية تحديد المواقع. يتم استخدامه لدفع عنصر إلى اليسار أو اليمين، مما يسمح للعناصر الأخرى بالالتفاف حوله. يتم استخدامه بشكل عام مع الصور والتخطيطات.

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

مثال

 img{ height: 200px; width: 250px; border: 7px ridge blue; } #left{ float: left; } #right{ float: right; } <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="left"> <img src="//techcodeview.com/img/css-tutorial/50/how-align-images-css.webp" id="right"> 

انتاج |