CSS משמש בעיקר למתן הסגנון הטוב ביותר לדף האינטרנט HTML. באמצעות CSS, אנו יכולים לציין את סידור האלמנטים בדף.

ישנן שיטות שונות ליישור הכפתור במרכז דף האינטרנט. אנחנו יכולים ליישר את הכפתורים אופקית כמו גם אנכית. אנו יכולים למרכז את הכפתור באמצעות השיטות הבאות:

יישור טקסט: מרכז- על ידי קביעת הערך של מאפיין text-align של תג div אב למרכז.שוליים: אוטומטי- על ידי הגדרת הערך של מאפיין השוליים לאוטומטי.תצוגה: flex- על ידי הגדרת הערך של מאפיין התצוגה ל-flex והערך של להצדיק-תוכן רכוש ל מֶרְכָּז .תצוגה: רשת- על ידי הגדרת הערך של מאפיין התצוגה לרשת.

בואו נבין את השיטות שלעיל באמצעות כמה איורים.

דוגמא

בדוגמה זו אנו משתמשים ב- יישור טקסט נכס והגדר את ערכו ל- מֶרְכָּז . זה יכול להיות ממוקם בתג גוף או בתג div האב של האלמנט.

כאן, אנו מניחים את יישור טקסט: מרכז; בתגית האב של רכיב הלחצן.

 Center align button .container{ text-align: center; border: 7px solid red; width: 300px; height: 200px; padding-top: 100px; } #btn{ font-size: 25px; } Click me 

תְפוּקָה

דוגמא

בדוגמה זו אנו משתמשים ב- תצוגה: רשת; רכוש, ו שוליים: אוטומטי; תכונה. כאן, אנו מניחים את תצוגה: רשת; בתגית האב של רכיב הלחצן.

תאריך Java נוכחי

הכפתור ימוקם במרכז המיקום האופקי והאנכי.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: grid; } button { background-color: lightblue; color: black; font-size: 25px; margin: auto; } p{ font-size: 25px; } Click me <p>In this example we are using the <b> display: grid; </b> and <b> margin: auto;</b> properties</p> 

תְפוּקָה

דוגמא

זוהי דוגמה נוספת למיקום הכפתור במרכז. בדוגמה זו אנו משתמשים ב- תצוגה: flex; תכונה, להצדיק-תוכן: מרכז; רכוש, ו align-items: center; תכונה.

דוגמה זו תעזור לנו למקם את הכפתור במרכז המיקום האופקי והאנכי.

 Center align button .container { width: 300px; height: 300px; border: 5px solid red; display: flex; justify-content: center; align-items: center; } button { background-color: lightblue; color: black; font-size: 25px; } Click me 

תְפוּקָה