תמונות הן חלק חשוב בכל יישום אינטרנט. הכללת הרבה תמונות באפליקציית אינטרנט אינה מומלצת בדרך כלל, אך חשוב להשתמש בתמונות בכל מקום בו הן נדרשות. 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"> 

תְפוּקָה