אינטערנעטוועב דיזיין

סענטערד: קסס-אויסלייג

ווען די אויסלייג פון די בלאַט איז אָפֿט נייטיק צו מאַכן אַ סענטערד קסס-וועג: למשל, צו צענטער די הויפּט אַפּאַראַט. עס זענען עטלעכע סאַלושאַנז צו דעם פּראָבלעם, יעדער פון וואָס וועט גיכער אָדער שפּעטער האָבן צו נוצן קיין קאָדער.

ייַנרייען טעקסט צו צענטער

אָפֿט פֿאַר דעקאָראַטיווע צוועקן איר ווילן צו שטעלן די טעקסט סענטערד, קסס אין דעם פאַל, צו רעדוצירן די צייַט פון ימפּאַזישאַן. ביז אַהער דעם איז געווען געטאן ניצן די HTML אַטריביוץ, אָבער איצט די סטאַנדאַרט required צו ייַנרייען די טעקסט מיט די נוסח בויגן. אין קאַנטראַסט צו די בלאָק פֿאַר וואָס איר ווילן צו טוישן די פונדרויסנדיק וואַטן אין קסס אַליינמאַנט פון טעקסט אין די מיטל איז געמאכט מיט אַ איין שורה:

  • טעקסט-ייַנרייען: צענטער;

דעם פאַרמאָג איז געווען ינכעראַטיד און דורכגעגאנגען פון פאָטער צו אַלע קינדער. עס איז משפּיע ניט בלויז די טעקסט אָבער אויך צו אנדערע עלעמענטן. פֿאַר דעם צוועק, זיי זאָל זיין לאָווערקאַסע (למשל, שפּאַן) אָדער רודערן-בלאָק (קיין בלאַקס וואָס ספּעציפיצירן אַרויסווייַזן פאַרמאָג: בלאָק). די יענער אָפּציע אויך אַלאַוז איר צו טוישן די ברייט און הייך פון די עלעמענט, מער Flexible קאָנפיגוראַטיאָן פון די ינדענטיישאַן.

בלעטער אָפֿט ייַנרייען אַטריביוט צו זיך די צעטל. דאס מיד מאכט די קאָד פאַרקריפּלט, זינט וו 3 ק יקנאַלידזשד ייַנרייען אַטריביוט פאַרעלטערט. ניצן עס אויף אַ בלאַט איז נישט רעקאַמענדיד.

סענטערד בלאָק

אויב איר ווילן צו שטעלן די אַליינמאַנט פון די דיוו אין די מיטל, קסס קענען פאָרשלאָגן גאַנץ אַ באַקוועם וועג: די נוצן פון פונדרויסנדיק וואַטן גרענעץ. וואַטן קענען זיין ספּעסיפיעד ווי די בלאָק יסודות, און שורה-בלאָק. סווויסוואַ ווערט זאָל זייַן 0 (ווערטיקאַל וואַטן), און אַוטאָ (אָטאַמאַטיק ינדענטיישאַן כאָריזאַנטאַלי):

  • גרענעץ: 0 אַוטאָ;

איצט דעם אָפּציע איז אנערקענט ווי לעגאַמרע גילטיק. ניצן פונדרויסנדיק וואַטן אויך אַלאַוז איר צו שטעלן די אַליינמאַנט פון די צענטער: קסס-גרענעץ פאַרמאָג אַלאַוז אונדז צו סאָלווע פילע פּראָבלעמס פֿאַרבונדן מיט די פּאַזישאַנינג עלעמענט אויף דעם בלאַט.

אַליינמאַנט פון די לינקס אָדער רעכט ברעג פון די בלאָק

מאל קסס-וועג טוט ניט דאַרפן אַליינמאַנט פון דעם צענטער, אָבער עס איז נייטיק צו שטעלן די ווייַטער צוויי בלאַקס, איינער פון די לינקס זייַט און די אנדערע - פון די רעכט. פֿאַר דעם עס איז די לאָזנ שווימען פאַרמאָג, וואָס קענען נעמען איינער פון דרייַ וואַלועס: לינקס, רעכט אָדער גאָרניט. זאל ס זאָגן איר האָבן צוויי בלאַקס אַז זאָל זיין געשטעלט זייַט דורך זייַט. דעמאָלט די קאָד איז ווי גייט:

  • .לעפט {לאָזנ שווימען: לינקס;}
  • .ריגהט {לאָזנ שווימען: רעכט}

אויב עס איז א דריט בלאָק, וואָס מוזן זיין ליגן אונטער די ערשטער צוויי בלאַקס (למשל, Footer), דעמאָלט עס איז נייטיק צו רעגיסטרירן קלאָר שטריך:

  • .לעפט {לאָזנ שווימען: לינקס;}
  • .ריגהט {לאָזנ שווימען: רעכט}
  • Footer {קלאָר: ביידע}

די פאַקט אַז די בלאַקס מיט די קלאסן פון לינקס און רעכט פאַלן אויס פון די גאַנץ לויפן, אַז איז, אַלע אנדערע עלעמענטן איגנאָרירט די זייער עקזיסטענץ פון עלעמענטן אַליינד. פאַרמאָג קלאָר: ביידע אַלאַוז Footer בלאָק אָדער קיין אנדערע קענטיק פּריסיפּיטייטיד פון די שטראָם סעלז און פּראָוכיבאַץ ייַנוויקלען (לאָזנ שווימען) אויף ביידע די לינק און רעכט. דעריבער, אין אונדזער משל, די Footer איז דיספּלייסט דאַונווערד.

ווערטיקאַל אַליינמאַנט

עס זענען קאַסעס ווו ניט גענוג צו שטעלן די אַליינמאַנט פון די צענטער פון די קסס-וועגן, איר מוזן אויך טוישן די ווערטיקאַל שטעלע פון די קינד בלאָק. קיין שורה אָדער רודערן-בלאָק עלעמענט קענען זיין געדריקט קעגן דער אויבערשטער אָדער נידעריקער ברעג, ליגן אין די מיטן פון די פאָטער עלעמענט אָדער זיין אין אַ אַרבאַטרערי אָרט. רובֿ אָפֿט דאַרפן אַליינמאַנט פון דעם צענטער פון די בלאָק, עס ניצט ווערטיקאַל-ייַנרייען אַטריביוט. רעכן עס זענען צוויי בלאַקס, איינער נעסטעד ין די אנדערע. אין דעם דרינענדיק אַפּאַראַט - רודערן-בלאָק עלעמענט (אַרויסווייַזן: ינלינע-בלאָק). עס איז נייטיק צו ייַנרייען די ווערטיקאַל בלאָק קינד:

  • אַליינמאַנט פון דער אויבערשטער גרענעץ - .טשילד {ווערטיקאַל-ייַנרייען: שפּיץ};
  • סענטערד - .טשילד {ווערטיקאַל-ייַנרייען: מיטן};
  • אַליינמאַנט פון די דנאָ ברעג - .טשילד {ווערטיקאַל-ייַנרייען: דנאָ};

ביי בלאָק יסודות אַודיאָ טעקסט-ייַנרייען, אָדער ווערטיקאַל-ייַנרייען טוט נישט צולייגן.

מעגלעך פּראָבלעמס מיט אַליינד וניץ

ווענ עס יז div align דעם צענטער פון די קסס-וועג קענען אָנמאַכן אַ ביסל צרה. למשל, ווען ניצן אַ לאָזנ שווימען: פֿאַר משל, עס זענען דרייַ בלאַקס: .פירסט, .סעקאָנד און .טהירד. די רגע און דריט בלאַקס ליגן אין דער ערשטער. אַן עלעמענט מיט אַ סאָרט רגע לינקס-אַליינד, און די לעצטע בלאָק - אויף די רעכט. נאָך אַליינינג די צוויי דראַפּט פון די טייַך. אויב די פאָטער עלעמענט איז נישט Defined הייך (למשל, 30עם), עס וועט ופהערן צו אויסשטרעקן די הייך פון סאַבסידיערי וניץ. צו ויסמייַדן דעם טעות, נוצן די "ספּייסער" - אַ ספּעציעל אַפּאַראַט, וואָס זעט .סעקאָנד און .טהירד. קסס-קאָד:

  • .סעקאָנד {לאָזנ שווימען: לינקס}
  • .טהירד {לאָזנ שווימען: רעכט}
  • .קלעאַרפיקס {הייך: 0; קלאָר: ביידע;}

פּסעוודאָ אָפֿט געניצט: נאָך, וואָס אויך אַלאַוז צו קריק די בלאַקס אין פּלאַץ דורך קריייטינג פּסעוודאָראַספּאָרקי (אין די משל אין די דיוו מיט קלאַס ליגט ין דעם קאַנטיינער און קאַמפּרייזיז אַ .פירסט .לעפט און .ריגהט):

  • .לעפט {לאָזנ שווימען: לינקס}
  • .ריגהט {לאָזנ שווימען: רעכט}
  • .קאָנטאַינער: נאָך {צופרידן: ''; אַרויסווייַזן: טיש; קלאָר: ביידע;}

די אויבן אָפּציעס - די מערסט פּראָסט, כאָטש עס זענען עטלעכע ווערייישאַנז. איר קענען שטענדיק געפֿינען די יזיאַסט און רובֿ באַקוועם וועג צו מאַכן פּסעוודאָראַספּאָרקי דורך יקספּעראַמאַנץ.

אן אנדער פּראָבלעם אָפט געפּלאָנטערט אויסלייג - אַליינמאַנט פון שורה-בלאָק עלעמענטן. נאָך יעדער פון זיי אַ פּלאַץ איז צוגעגעבן אויטאָמאַטיש. שעפּן עס העלפּס די גרענעץ פאַרמאָג, וואָס איז Defined דורך דעם נעגאַטיוו ינדענטיישאַן. עס זענען אנדערע וועגן, וואָס זענען געניצט ווייניקער אָפט, למשל, באַשטעטיק די שריפֿט גרייס. אין דעם פאַל, די פּראָפּערטיעס פון די פאָטער עלעמענט רעדזשאַסטערז שריפֿט-גרייס: 0. אויב ליגן ין בלאַקס פון טעקסט, די פּראָפּערטיעס פון שורה-בלאָק עלעמענטן האָבן זיך אומגעקערט צו דער געוואלט שריפֿט גרייס. לעמאָשל, שריפֿט-גרייס: 1עם. דעם אופֿן איז ניט שטענדיק באַקוועם, אַזוי עס איז פיל מער קאַמאַנלי געניצט ווערסיע מיט פונדרויסנדיק מאַרדזשאַנז.

אַליינינג בלאַקס אַלאַוז איר צו שאַפֿן שיין און פונקטיאָנאַל בלעטער: דער גענעראַל אויסלייג און אויסלייג, און דער אָרט פון סכוירע אין די שאַפּס, און QR ען אויף די פּלאַץ פון אַ קליין.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 yi.unansea.com. Theme powered by WordPress.