CSS עוזר לנו לשלוט בהצגת תמונות ביישומי אינטרנט. ריכוז תמונות או טקסטים הוא משימה נפוצה ב-CSS. כדי למרכז תמונה, עלינו להגדיר את הערך של שוליים-שמאליים ו שוליים-ימין ל אוטומטי ולהפוך אותו לאלמנט בלוק על ידי שימוש ב- בלוק תצוגה; תכונה.
אם התמונה נמצאת באלמנט div, נוכל להשתמש ב- יישור טקסט: מרכז; מאפיין ליישור התמונה למרכז ב-div.
mylivecricket.
ה אומרים כי אלמנט הוא אלמנט מוטבע שניתן למרכז אותו בקלות על ידי החלת ה- יישור טקסט: מרכז; המאפיין של CSS לרכיב האב שמכיל אותו.
הערה: לא ניתן למרכז את התמונה אם הרוחב מוגדר ל-100% (ברוחב מלא).
אנחנו יכולים להשתמש במאפיין הקיצור שולים והגדר אותו ל אוטומטי ליישור התמונה במרכז, במקום להשתמש ב- שוליים-שמאליים ו שוליים-ימין תכונה.
בוא נראה כיצד למרכז תמונה על ידי יישום יישור טקסט: מרכז; נכס לאלמנט האב שלו.
דוגמא
בדוגמה זו, אנו מיישרים את התמונות באמצעות ה- יישור טקסט: מרכז; תכונה. התמונה נמצאת באלמנט div.
שיעור מתמטיקה ב-Java
div { border: 2px solid red; } img{ height: 300px; width: 300px; } #center { text-align: center; } <img src="//techcodeview.com/img/css-tutorial/36/how-center-images-css.webp"> בדוק את זה עכשיו תְפוּקָה
דוגמא
כעת, אנו משתמשים ב- שוליים-שמאלי: אוטומטי; שוליים-ימין: אוטומטי; ו בלוק תצוגה; מאפיינים ליישור התמונה למרכזה.
body{ background-color: lightblue; } #image { display: block; margin-left: auto; margin-right: auto; border: 8px ridge blue; padding: 5px; } בדוק את זה עכשיו תְפוּקָה
תור ב-java
