כיצד למרכז רשימה אופקי ב- Div ב- CSS

תוֹכֶן

• הוראות

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

הוראות

ניתן להשתמש ב- CSS ו- HTML כדי לשלוט במראה של דף האינטרנט שלך (Comstock / Stockbyte / Getty תמונות)

1. פתח את קובץ ה- HTML שלך בעורך טקסט, כגון Windows Notepad.

2. הוסף את סגנונות CSS הדרושים לרשימה האופקית בקטע "" של קובץ HTML על ידי הוספת הקוד הבא:

   type = "text / css"> .myclass {text-align: center; } .myclass ul {width: 275px; margin: 0px auto} .myclass li {display: block; צף: משמאל; גובה: 50px; line-height: 50px; שוליים: 5px; רוחב: 125px; border: solid 1px black; }

   רוחב הרשימה (ul) מייצג את סכום הרוחב ואת השוליים של הפריטים האופקיים (li).

3. צור רשימה אופקית בקטע ">" בקובץ HTML על ידי הוספת הקוד הבא:

   • פריט ראשון
   • פריט שני ב- div

   התג "ul" מציין רשימה לא מסודרת. התג "li" מתאים לפריט ברשימה. פריטי רשימה משתמשים בסגנונות CSS התואמים לאלו שהוגדרו למעלה.

   
   

4. שמור את קובץ ה- HTML וטען אותו בשרת האינטרנט שלך כדי להציג את הרשימה האופקית והמרוכזת.