כיצד למרכז קישורים ב-CSS

Kyzd Lmrkz Qyswrym B Css



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

ישנן שתי שיטות למרכז את הקישור:

במאמר זה נסביר את שתי השיטות למרכז את הקישור. אז הבה נתחיל!







שיטה 1: מרכז קישורים ב-CSS באמצעות מאפיין יישור טקסט

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



תחביר



התחביר של מאפיין יישור הטקסט הוא:





יישור טקסט : ערך

במקום ' ערך ', אתה יכול להגדיר את יישור הטקסט כגון שמאל, ימין, מרכז וצדק.

כעת, נשתמש ב' יישור טקסט ' כדי ליישר את הקישורים הנתונים במרכז.



דוגמא

כדי למרכז קישור בדף אינטרנט, נוסיף קישור ב-HTML בתוך התג . לשם כך, השתמש בתג כדי להגדיר היפר-קישור ולתת את כתובת האתר הנדרש. לאחר מכן, ציין את שם הקישור. במקרה שלנו, הוספנו את הקישור לאתר Linuxhint שלנו.

HTML

<
גוּף >

< א href = 'https://linuxhint.com/' > לינוקס < / א >

< / גוּף >

התמונה המצורפת למטה מציינת שהקישור נוסף שממוקם בצד שמאל כברירת מחדל:

כעת עבור ל-CSS כדי למרכז את הקישור.

כאן, נשתמש ב' א ' כדי לגשת לקישור שנוסף. לאחר מכן, הגדר את הערך של יישור טקסט כ' מֶרְכָּז ' והצג כ' לַחסוֹם '. כתוצאה מכך, האלמנט יתווסף כאלמנט בלוק, החל בקו חדש ותופס את כל הרוחב.

CSS

א {

יישור טקסט : מֶרְכָּז ;

לְהַצִיג : לַחסוֹם ;

}

הערה: מאפיין יישור טקסט CSS אינו פועל לבדו למרכז את התג. לכן, עליך להשתמש ב' לְהַצִיג ' מאפיין והגדר את הערך שלו ' לַחסוֹם ' למרכז את הקישור.

כעת, עבור אל ה-HTML והפעל אותו כדי לראות את התוצאה הבאה. כאן, אתה יכול לראות שהקישור מיושר במרכז דף האינטרנט:

נעבור לשיטה השנייה ליישור הקישור במרכז.

שיטה 2: מרכז קישורים ב-CSS באמצעות מאפיין 'שוליים'.

ב-CSS, ה' שולים הנכס משמש למרכז את הקישור. זהו תכונת הקיצור של ' שוליים-שמאליים ', ' שוליים-ימין ', ' שוליים למעלה ', ו' שוליים-תחתית ' נכסים. אתה יכול להגדיר את הערכים של כל המאפיינים הנתונים בשורה אחת.

תחביר

תחביר של מאפיין השוליים הוא:

שולים : אוטומטי | חלק עליון ימין תַחתִית שמאלה

התיאור של התחביר שסופק לעיל ניתן להלן:

  • אוטומטי: הוא משמש להגדרת אלמנטים בהתאם לדפדפן.
  • חלק עליון: הוא משמש להגדרת השוליים מלמעלה.
  • ימין: הוא משמש להגדרת השוליים מימין.
  • לַחְצָן: הוא משמש להגדרת השוליים מלמטה.
  • שמאלה: הוא משמש להגדרת השוליים משמאל.

הערה: ציון שני ערכים יסמן את השוליים מלמעלה ולמטה ואת השוליים משמאל ומימין; עם זאת, אם יתווסף ערך אחד, השוליים יוחלו על כל ארבעת הצדדים.

בוא נעבור לדוגמא, שבה נרכז קישור באמצעות ' שולים ' תכונה.

דוגמא

ראשית, הגדר את הערך של מאפיין התצוגה כ' לַחסוֹם ' והרוחב כ' 70 פיקסלים '. לאחר מכן, החל את מאפיין השוליים והגדר את הערך שלו ל' אוטומטי ”:

א {

לְהַצִיג : לַחסוֹם ;

רוֹחַב : 70 פיקסלים ;

שולים : אוטומטי ;

}

הערה: ה ' לְהַצִיג ' ו' רוֹחַב יש צורך להגדיר נכס; אחרת ה ' שולים 'רכוש לא יעבוד. ניתן להגדיר את הערך של מאפיין הרוחב בהתאם לרזולוציית מסך התצוגה ולאורך הטקסט.

אתה יכול לראות מהתמונה הנתונה שהקישור מרוכז בהצלחה:

זהו זה! הסברנו את השיטות למרכז את הקישור.

סיכום

ה ' יישור טקסט ' ו' שולים הנכס משמש למרכז את הקישור עם התרומה של לְהַצִיג ' ו' רוֹחַב ' תכונה. מאפיין התצוגה הכרחי יחד עם מאפיין יישור הטקסט, בעוד שמשתמשים במאפיין השוליים, הן מאפייני התצוגה והן מאפייני הרוחב הם חובה למרכז את הקישור. מדריך זה דן בשיטות שונות למרכז קישור ב-CSS.