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

---