צענטער בילדער, טעקסט, און פאַרשפּאַרן עלעמענטן ווען בנין וועבסיטעס
אויב איר זענט לערנען ווי צו בויען וועבסיטעס , איינער פון די מערסט פּראָסט טריקס איר וועט דאַרפֿן צו בעל איז ווי צו צענטער זאכן אין דעם בלעטערער פֿענצטער. דאס קען מיינען צענטערינג אַ בילד אויף דעם בלאַט, אָדער עס קען זיין צענטער-דזשאַסטאַפייינג טעקסט ווי כעדליינז ווי טייל פון די פּלאַן.
דער ריכטיק וועג צו ויספירן דעם וויזשאַוואַל קוק פון סענטערד בילדער אָדער טעקסט אָדער אַפֿילו דיין גאנצע וועבפּאַגע איז דורך ניצן קאַסקאַדינג סטייל שיץ (קסס) . רובֿ פון די פּראָפּערטיעס פֿאַר סענטערינג זענען אין CSS זינט ווערסיע 1.0, און זיי אַרבעט גרויס מיט CSS3 און מאָדערן וועב בראַוזערז .
ווי פילע אַספּעקץ פון וועב פּלאַן, עס זענען קייפל וועגן צו נוצן קסס צו צענטער עלעמענטן אין אַ וועב בלאַט. זאל ס נעמען אַ קוק בייַ עטלעכע פאַרשידענע וועגן צו נוצן קסס צו דערגרייכן דעם וויזשאַוואַל קוקן.
אויף איבערבליק פון ניצן CSS צו צענטער עלעמענץ אין HTML
סענטערינג מיט קסס קענען זיין אַ אַרויסרופן פֿאַר אָנהייב וועב דיזיינערז ווייַל עס זענען אַזוי פילע פאַרשידענע וועגן צו ויספירן דעם איין וויזשאַוואַל סטיל. בשעת די פאַרשיידנקייַט פון מעטהאָדס קענען זיין פייַן אָדער סיזאַנד וועב דעוועלאָפּערס וואס וויסן אַז נישט אַלע טעקניקס אַרבעט אויף יעדער עלעמענט, דאָס קען זיין שווער צו פאָרן נייַע וועב פּראָפעססיאָנאַלס זינט די ברייט פאַרשיידנקייַט פון מעטהאָדס מיטל זיי דאַרפֿן צו וויסן ווען צו נוצן וואָס צוגאַנג. דער בעסטער זאַך צו טאָן איז צו געווינען אַ פארשטאנד פון אַ ביסל אַפּראָוטשיז. ווי איר אָנהייבן צו נוצן זיי, איר וועט לערנען וואָס מעטהאָדס אַרבעט בעסטער אין וואָס ינסטאַנסיז.
אויף אַ הויך מדרגה, איר קענען נוצן CSS צו:
- צענטער טעקסט
- צענטער אַ בלאָק-מדרגה עלעמענט (ווי אַ אָפּטייל)
- צענטער אַ בילד
- ווערטיקלי צענטער אַ בלאָק אָדער אַ בילד
פילע (פילע) יאָרן צוריק, וועב דיזיינערז קענען נוצן די
סענטערינג טעקסט מיט CSS
די יזיאַסט זאַך צו צענטער אויף אַ וועבפּאַגע איז טעקסט. עס איז בלויז איין נוסח פאַרמאָג איר דאַרפֿן צו וויסן צו טאָן דאָס: טעקסט-אַליינמאַנט. נעמען די CSS נוסח ונטער, פֿאַר בייַשפּיל:
p.center {טעקסט-ייַנרייען: צענטער; }
מיט דעם שורה פון קסס, יעדער פּאַראַגראַף געשריבן מיט דעם צענטער קלאַס וואָלט זיין צענטערעד כאָריזאַנטאַלי ין זייַן פאָטער עלעמענט. פֿאַר בייַשפּיל, אויב דער פּאַראַגראַף איז ין אַ אָפּטייל, טייַטש עס איז געווען אַ קינד פון דעם אָפּטייל, עס וואָלט זיין צענטערעד כאָריזאַנטאַלי ין די
דאָ ס אַ בייַשפּיל פון דעם סאָרט געווענדט אין די HTML דאָקומענט:
דעם טעקסט איז סענטערד
ווען סענטערינג טעקסט מיט די טעקסט-ייַנרייען פאַרמאָג, געדענקען אַז עס וועט זיין צענטערעד ין זייַן מיט עלעמענט און ניט דאַווקע סענטערד ין דער פול בלאַט זיך. אויך געדענקען אַז צענטער-גערעכטפארטיקט טעקסט קענען זיין שווער צו לייענען פֿאַר גרויס בלאַקס פון אינהאַלט, אַזוי נוצן דעם סטיל ספּערינגלי. העאַדלינעס און קליין בלאַקס פון טעקסט, ווי טיזער טעקסט פֿאַר אַ אַרטיקל אָדער אנדערע אינהאַלט, זענען אָפט גרינג צו לייענען און פייַן ווען סענטערד, אָבער גרעסערע בלאַקס פון טעקסט, ווי די פול אַרטיקל זיך, וואָלט זיין טשאַלאַנדזשינג צו פאַרנוצן אויב דער אינהאַלט איז גאָר צענטער גערעכטפארטיקט. געדענקען, readability איז שטענדיק שליסל ווען עס קומט צו וועבזייטל טעקסט!
סענטערינג בלאַקס פון אינהאַלט מיט קסס
בלאַקס זענען קיין יסודות אויף דיין בלאַט וואָס האָבן אַ דיפיינד ברייט און זענען געגרינדעט ווי אַ בלאָק-מדרגה עלעמענט. אָפטענטימעס, די בלאַקס זענען באשאפן דורך ניצן די HTML
div.center {
גרענעץ: 0 מאַשין;
width: 80em;
}
דעם קסס סטענאָגראַפיע פֿאַר די גרענעץ פאַרמאָג וואָלט שטעלן דעם שפּיץ און דנאָ מאַרדזשאַנז צו אַ ווערט פון 0, בשעת די לינקס און רעכט וואָלט נוצן "אַוטאָ." דעם יסענשאַלי נעמט קיין פּלאַץ וואָס איז בנימצא און דיווידעס עס יוואַנלי צווישן די צוויי זייטן פון די וויזפּאָרט פֿענצטער, יפעקטיוולי סענטערינג די עלעמענט אויף דעם בלאַט.
דאָ עס איז געווענדט אין די HTML:
אָבער די טעקסט אינעווייניק עס איז לינקס גלייַך.
ווי לאַנג ווי דיין בלאָק האט אַ דיפיינד ברייט, עס וועט צענטער זיך אין דעם מיט עלעמענט. טעקסט קאַנטיינד אין אַז פאַרשפּאַרן וועט נישט זיין צענטערעד ין עס, אָבער וועט זיין לינקס-גערעכטפארטיקט. דאָס איז ווייַל דאָס טעקסט איז לינקס-גערעכטפארטיקט אין די פעליקייַט אין וועב בראַוזערז. אויב איר געוואלט די טעקסט סענטערד ווי געזונט, איר קען נוצן די טעקסט-ייַנרייען פאַרמאָג מיר באדעקט פריער אין קאַנדזשאַנגקשאַן מיט דעם אופֿן צו צענטער די אָפּטייל.
סענטערינג בילדער מיט קסס
בשעת רובֿ בראַוזערז וועט אַרויסווייַזן בילדער סענטערד ניצן די זעלבע טעקסט-אַליינמאַנט פאַרמאָג מיר שוין געקוקט בייַ די פּאַראַגראַף, עס איז נישט אַ גוטע געדאַנק צו פאַרלאָזן דעם טעכניק ווי עס איז נישט רעקאַמענדיד דורך די וו 3 ק . זינט עס איז נישט רעקאַמענדיד, עס איז שטענדיק אַ געלעגנהייַט אַז צוקונפֿט ווערסיעס פון בראַוזערז קען אויסדערוויילט צו איגנאָרירן דעם אופֿן.
אַנשטאָט פון ניצן טעקסט-צולייגן צו צענטער אַ בילד, איר זאָל בישליימדיק זאָגן דעם בלעטערער אַז דער בילד איז אַ בלאָק-מדרגה עלעמענט. דעם וועג, איר קענען צענטער עס ווי איר וואָלט קיין אנדערע בלאָק. דאָ איז די CSS צו מאַכן דעם פּאַסירן:
img.center {
ווייַז: בלאָק;
גרענעץ-לינקס: אַוטאָ;
גרענעץ-רעכט: אַוטאָ;
}
און דאָ איז דער HTML אַז פֿאַר די בילד וואָס מיר וואָלט ווי צו זיין צענטערעד:
איר קענען אויך צענטער אַבדזשעקץ ניצן אין-שורה CSS (זען ווייטער), אָבער דעם צוגאַנג איז נישט רעקאַמענדיד זינט עס מוסיף וויזשאַוואַל סטיילז אין דיין HTML מאַרקאַפּ. געדענקט, מיר ווילן צו באַזונדער סטיל און סטרוקטור, אַזוי צו לייגן קסס סטיילז צו דיין HTML קאָד מיט ברעכן וואָס צעשיידונג און, ווי אַזאַ, עס זאָל זיין אַוווידיד ווען מעגלעך.
סענטערינג עלעמענץ ווערטיקלי מיט קסס
צענטערינג אַבדזשעקס ווערטיקלי האט שטענדיק געווען טשאַלאַנדזשינג אין וועב פּלאַן, אָבער מיט די מעלדונג פון די קסס פלעקסיבלע באָקס אויסלייג מאָדולע אין קסס 3, עס איז איצט אַ וועג צו טאָן עס.
ווערטיקאַל אַליינמאַנט אַרבעט גלייַך צו האָריזאָנטאַל אַליינמאַנט באדעקט אויבן. די קסס פאַרמאָג איז ווערטיקאַל-צולייגן מיט די מיטל ווערט.
.vcenter {
ווערטיקאַל-ייַנרייען: מיטל;
}
די דאַונסייד צו דעם צוגאַנג איז אַז נישט אַלע בראַוזערז שטיצן CSS FlexBox, כאָטש מער און מער זענען קומען אַרום צו דעם נייַ קסס אויסלייג אופֿן! אין פאַקט, אַלע מאָדערן בראַוזערז הייַנט איצט שטיצן דעם CSS נוסח. דעם מיטל אַז דיין בלויז קאַנסערנז מיט פלעקסבאָקס וואָלט זיין פיל עלטער בלעטערער ווערסיע.
אויב איר האָט פּראָבלעמס מיט עלטערע בראַוזערז, די W3C רעקאַמענדז אַז איר זענט צענטער טעקסט ווערטיקלי אין אַ קאַנטיינער ניצן די פאלגענדע אופֿן:
- אָרט די עלעמענטן צו זיין סענטערד ין אַ מיט עלעמענט, אַזאַ ווי אַ דיוו.
- שטעלן אַ מינימום הייך אויף די מיטגליד.
- דערקלערן אַז מיט עלעמענט ווי אַ טיש צעל.
- שטעלן די ווערטיקאַל אַליינמאַנט צו "מיטל."
למשל, דאָ איז די CSS:
.vcenter {
min-height: 12em;
אַרויסווייַזן: טיש-צעל;
ווערטיקאַל-ייַנרייען: מיטל;
}
און דאָס איז די HTML:
דעם טעקסט איז ווערטיקלי סענטערד אין די קעסטל.
ווערטיקאַל סענטערינג און עלטער ווערסיעס פון Internet Explorer
עס זענען עטלעכע וועגן צו צווינגען Internet Explorer (IE) צו צענטער און דעמאָלט נוצן קאַנדישאַנאַל באַמערקונגען אַזוי אַז בלויז הייסט די סטיילז, אָבער זיי זענען אַ ביסל ווערבאָוז און מיעס. די גוטע נייַעס איז אַז מיט מיקראָסאָפט פריש באַשלוס צו פאַלן שטיצן פֿאַר עלטערע ווערסיעס פון הייסט, יענע אַנסאַפּאָרטינג בראַוזערז זאָל זיין אויף זייער וועג אויס באַלד, מאכן עס גרינגער פֿאַר וועב דיזיינערז צו נוצן מאָדערן אויסלייג אַפּפּרעסיז ווי CSS FlexBox וואָס וועט מאַכן אַלע CSS אויסלייג, ניט נאָר סענטערינג, מער גרינגער פֿאַר אַלע וועב דיזיינערז.