{"id":6391,"date":"2026-06-02T11:00:21","date_gmt":"2026-06-02T07:30:21","guid":{"rendered":"https:\/\/parmin.cloud\/blog\/?p=6391"},"modified":"2026-06-02T11:00:21","modified_gmt":"2026-06-02T07:30:21","slug":"%d9%88%db%8c%da%98%da%af%db%8c-vertical-align-%d8%af%d8%b1-css","status":"publish","type":"post","link":"https:\/\/parmin.cloud\/blog\/%d9%88%db%8c%da%98%da%af%db%8c-vertical-align-%d8%af%d8%b1-css\/","title":{"rendered":"\u0648\u06cc\u0698\u06af\u06cc vertical-align \u062f\u0631 CSS"},"content":{"rendered":"

\u0645\u0642\u062f\u0645\u0647<\/h2>\n

\u0648\u06cc\u0698\u06af\u06cc vertical-align<\/code> \u062f\u0631 CSS \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u062a\u0631\u0627\u0632 \u0639\u0645\u0648\u062f\u06cc \u0639\u0646\u0627\u0635\u0631 \u062f\u0631\u0648\u0646\u200c\u062e\u0637\u06cc (Inline Elements)<\/strong> \u06cc\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u0633\u0644\u0648\u0644\u200c\u0647\u0627\u06cc \u062c\u062f\u0648\u0644 (Table Cells<\/strong>) \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n

\u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0634\u062e\u0635 \u0645\u06cc\u200c\u06a9\u0646\u062f \u06a9\u0647 \u06cc\u06a9 \u0639\u0646\u0635\u0631 \u0646\u0633\u0628\u062a \u0628\u0647 \u0633\u0627\u06cc\u0631 \u0639\u0646\u0627\u0635\u0631 \u0645\u0648\u062c\u0648\u062f \u062f\u0631 \u0647\u0645\u0627\u0646 \u062e\u0637 \u0686\u06af\u0648\u0646\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0639\u0645\u0648\u062f\u06cc \u0642\u0631\u0627\u0631 \u0628\u06af\u06cc\u0631\u062f.<\/p>\n

\n

\u0646\u062d\u0648\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/h2>\n

\u0648\u06cc\u0698\u06af\u06cc vertical-align<\/code> \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u062f \u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u062f:<\/p>\n

    \n
  • \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u0639\u062f\u062f\u06cc \u0628\u0631 \u062d\u0633\u0628 \u0637\u0648\u0644 (px<\/code>, em<\/code>, rem<\/code> \u0648 …)<\/li>\n
  • \u06cc\u06a9 \u0645\u0642\u062f\u0627\u0631 \u062f\u0631\u0635\u062f\u06cc (%<\/code>)<\/li>\n
  • \u06cc\u06a9\u06cc \u0627\u0632 8 \u0645\u0642\u062f\u0627\u0631 \u06a9\u0644\u06cc\u062f\u06cc (Keyword)<\/li>\n<\/ul>\n

    \u0646\u0645\u0648\u0646\u0647:<\/p>\n

    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    .avatar<\/span> {\r\n  vertical-align: middle<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u062f\u0631 \u0627\u06cc\u0646 \u0645\u062b\u0627\u0644 \u0639\u0646\u0635\u0631 \u062f\u0627\u0631\u0627\u06cc \u06a9\u0644\u0627\u0633 avatar<\/code> \u062f\u0631 \u0648\u0633\u0637 \u062e\u0637 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f.<\/p>\n
    \n
    \u0645\u0642\u0627\u062f\u06cc\u0631 \u0645\u062e\u062a\u0644\u0641 vertical-align<\/h1>\n
    1. baseline (\u067e\u06cc\u0634\u200c\u0641\u0631\u0636)<\/h2>\n
    \u062e\u0637 \u0645\u0628\u0646\u0627\u06cc (Baseline) \u0639\u0646\u0635\u0631 \u0628\u0627 \u062e\u0637 \u0645\u0628\u0646\u0627\u06cc \u0639\u0646\u0635\u0631 \u0648\u0627\u0644\u062f \u0647\u0645\u200c\u062a\u0631\u0627\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    vertical-align<\/span>: baseline<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u062d\u0627\u0644\u062a \u067e\u06cc\u0634\u200c\u0641\u0631\u0636 \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u0633\u062a.<\/p>\n
    \u0645\u062b\u0627\u0644:<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n
    \n
    \n
    \n
    \n
    \n
    Sammy sells seashells \ud83d\udc1a by the seashore.<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    2. bottom<\/h2>\n
    \u067e\u0627\u06cc\u06cc\u0646\u200c\u062a\u0631\u06cc\u0646 \u0628\u062e\u0634 \u0639\u0646\u0635\u0631 \u0628\u0627 \u067e\u0627\u06cc\u06cc\u0646\u200c\u062a\u0631\u06cc\u0646 \u0642\u0633\u0645\u062a \u062e\u0637 \u0647\u0645\u200c\u062a\u0631\u0627\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    vertical-align<\/span>: bottom<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u0645\u0646\u0627\u0633\u0628 \u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0628\u062e\u0648\u0627\u0647\u06cc\u062f \u0639\u0646\u0635\u0631 \u0628\u0647 \u0627\u0646\u062a\u0647\u0627\u06cc \u062e\u0637 \u0628\u0686\u0633\u0628\u062f.<\/p>\n
    \n
    3. middle<\/h2>\n
    \u0639\u0646\u0635\u0631 \u062f\u0631 \u0645\u0631\u06a9\u0632 \u0639\u0645\u0648\u062f\u06cc \u062e\u0637 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f.<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    vertical-align<\/span>: middle<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u0627\u06cc\u0646 \u0645\u0642\u062f\u0627\u0631 \u06cc\u06a9\u06cc \u0627\u0632 \u067e\u0631\u06a9\u0627\u0631\u0628\u0631\u062f\u062a\u0631\u06cc\u0646 \u062d\u0627\u0644\u062a\u200c\u0647\u0627 \u0628\u0631\u0627\u06cc \u0647\u0645\u200c\u062a\u0631\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0622\u06cc\u06a9\u0648\u0646\u200c\u0647\u0627 \u0648 \u062a\u0635\u0627\u0648\u06cc\u0631 \u06a9\u0646\u0627\u0631 \u0645\u062a\u0646 \u0627\u0633\u062a.<\/p>\n
    \u0645\u062b\u0627\u0644:<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    img<\/span> {\r\n  vertical-align: middle<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    4. sub<\/h2>\n
    \u0639\u0646\u0635\u0631 \u0645\u0627\u0646\u0646\u062f \u0632\u06cc\u0631\u0646\u0648\u06cc\u0633 (Subscript) \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    vertical-align<\/span>: sub<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    H\u2082O<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    5. super<\/h2>\n
    \u0639\u0646\u0635\u0631 \u0645\u0627\u0646\u0646\u062f \u0628\u0627\u0644\u0627\u0646\u0648\u06cc\u0633 (Superscript) \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    vertical-align<\/span>: super<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u0646\u0645\u0648\u0646\u0647 \u06a9\u0627\u0631\u0628\u0631\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    x\u00b2<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    6. text-bottom<\/h2>\n
    \u067e\u0627\u06cc\u06cc\u0646 \u0639\u0646\u0635\u0631 \u0628\u0627 \u067e\u0627\u06cc\u06cc\u0646 \u0645\u062a\u0646 \u0647\u0645\u200c\u062a\u0631\u0627\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    vertical-align<\/span>: text-bottom<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    7. text-top<\/h2>\n
    \u0628\u0627\u0644\u0627\u06cc \u0639\u0646\u0635\u0631 \u0628\u0627 \u0628\u0627\u0644\u0627\u06cc \u0645\u062a\u0646 \u0647\u0645\u200c\u062a\u0631\u0627\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    vertical-align<\/span>: text-top<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    8. top<\/h2>\n
    \u0628\u0627\u0644\u0627\u06cc \u0639\u0646\u0635\u0631 \u0628\u0627 \u0628\u0627\u0644\u0627\u06cc \u062e\u0637 \u0647\u0645\u200c\u062a\u0631\u0627\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    vertical-align<\/span>: top<\/span>;<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u0628\u0631\u0627\u06cc \u0686\u0633\u0628\u0627\u0646\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 \u0628\u0647 \u0642\u0633\u0645\u062a \u0628\u0627\u0644\u0627\u06cc\u06cc \u062e\u0637 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
    \n
    \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0642\u062f\u0627\u0631 \u0639\u062f\u062f\u06cc<\/h1>\n
    \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0641\u0627\u0635\u0644\u0647 \u0639\u0646\u0635\u0631 \u0631\u0627 \u0646\u0633\u0628\u062a \u0628\u0647 \u062e\u0637 \u0645\u0628\u0646\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n
    \u0645\u062b\u0627\u0644:<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    .icon<\/span> {\r\n  vertical-align: 10<\/span>px<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u062f\u0631 \u0627\u06cc\u0646 \u062d\u0627\u0644\u062a \u0639\u0646\u0635\u0631 10 \u067e\u06cc\u06a9\u0633\u0644 \u0628\u0627\u0644\u0627\u062a\u0631 \u0627\u0632 \u062e\u0637 \u0645\u0628\u0646\u0627 \u0642\u0631\u0627\u0631 \u0645\u06cc\u200c\u06af\u06cc\u0631\u062f.<\/p>\n
    \n
    \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062f\u0631\u0635\u062f<\/h1>\n
    \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0627\u0632 \u062f\u0631\u0635\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f:<\/p>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    .icon<\/span> {\r\n  vertical-align: 20<\/span>%<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \u062f\u0631\u0635\u062f \u0628\u0631 \u0627\u0633\u0627\u0633 \u0645\u0642\u062f\u0627\u0631 line-height<\/code> \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u06cc\u200c\u0634\u0648\u062f.<\/p>\n
    \n
    \u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627\u06cc \u0631\u0627\u06cc\u062c vertical-align<\/h1>\n
    \u0647\u0645\u200c\u062a\u0631\u0627\u0632 \u06a9\u0631\u062f\u0646 \u0622\u06cc\u06a9\u0648\u0646 \u0628\u0627 \u0645\u062a\u0646<\/h3>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    .icon<\/span> {\r\n  vertical-align: middle<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \u0647\u0645\u200c\u062a\u0631\u0627\u0632 \u06a9\u0631\u062f\u0646 \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0646\u0627\u0631 \u0645\u062a\u0646<\/h3>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    img<\/span> {\r\n  vertical-align: middle<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \u062a\u0646\u0638\u06cc\u0645 \u0645\u0648\u0642\u0639\u06cc\u062a \u0641\u0631\u0645\u0648\u0644\u200c\u0647\u0627\u06cc \u0631\u06cc\u0627\u0636\u06cc<\/h3>\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    <\/div>\n<\/div>\n<\/div>\n
    \n
    \n
    \n
    \n
    \n
    .sub<\/span> {\r\n  vertical-align: sub<\/span>;\r\n}\r\n\r\n.super<\/span> {\r\n  vertical-align: super<\/span>;\r\n}<\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    <\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \u0646\u06a9\u062a\u0647 \u0645\u0647\u0645<\/h1>\n
    \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0646\u0648\u06cc\u0633\u0627\u0646 \u062a\u0635\u0648\u0631 \u0645\u06cc\u200c\u06a9\u0646\u0646\u062f vertical-align<\/code> \u0628\u0631\u0627\u06cc \u0648\u0633\u0637\u200c\u0686\u06cc\u0646 \u06a9\u0631\u062f\u0646 \u0639\u0646\u0627\u0635\u0631 Block \u0645\u0627\u0646\u0646\u062f div<\/code> \u06a9\u0627\u0631\u0628\u0631\u062f \u062f\u0627\u0631\u062f\u061b \u0627\u0645\u0627 \u0627\u06cc\u0646 \u062a\u0635\u0648\u0631 \u0627\u0634\u062a\u0628\u0627\u0647 \u0627\u0633\u062a.<\/p>\n
    \u0648\u06cc\u0698\u06af\u06cc vertical-align<\/code> \u0641\u0642\u0637 \u0631\u0648\u06cc \u0645\u0648\u0627\u0631\u062f \u0632\u06cc\u0631 \u0627\u062b\u0631 \u062f\u0627\u0631\u062f:<\/p>\n