{"id":61,"date":"2026-07-25T20:41:06","date_gmt":"2026-07-25T12:41:06","guid":{"rendered":"https:\/\/blog.huajimc.cn\/?p=61"},"modified":"2026-07-26T02:26:43","modified_gmt":"2026-07-25T18:26:43","slug":"css-vertical-align","status":"publish","type":"post","link":"https:\/\/blog.huajimc.cn\/index.php\/2026\/07\/25\/css-vertical-align\/","title":{"rendered":"CSS\uff1avertical-align \u5c5e\u6027"},"content":{"rendered":"\n

\u5728\u5904\u7406\u884c\u5185\u56fe\u6587\u5782\u76f4\u5c45\u4e2d\u5bf9\u9f50\uff08\u5982\u672c\u7ad9\u5e95\u90e8\u7684\u5907\u6848\u884c\uff09\u65f6\uff0c\u5e38\u7528\u7684\u65b9\u6cd5\u662f\u5c06\u7236\u5143\u7d20\u91c7\u7528 flex \u5e03\u5c40\uff0c\u5e76\u8bbe\u7f6e align-items: center<\/code>\u3002\u4eca\u5929\u6211\u4e86\u89e3\u5230\u4e86\u4e00\u4e2a CSS \u5c5e\u6027\u2014\u2014vertical-align<\/code>\uff0c\u5728\u7b80\u5355\u573a\u666f\u4e0b\u53ef\u4ee5\u66f4\u8f7b\u91cf\u3001\u66f4\u76f4\u63a5\u5730\u5b9e\u73b0\u8be5\u6548\u679c\u3002<\/p>\n\n\n\n

\u4e3a\u4ec0\u4e48\u6211\u4ece\u6765\u6ca1\u542c\u8bf4\u8fc7\u8fd9\u4e2a\u4e1c\u897f QwQ<\/p>\n\n\n\n

vertical-align \u662f\u4ec0\u4e48<\/h2>\n\n\n\n

vertical-align<\/code> \u5c5e\u6027\u7528\u4e8e\u6307\u5b9a\u884c\u5185<\/strong>\uff08inline<\/code>\uff09\u3001\u884c\u5185\u5757<\/strong>\uff08inline-block<\/code>\uff09\u6216\u8868\u683c\u5355\u5143\u683c<\/strong>\uff08table-cell<\/code>\uff09\u5143\u7d20\u7684\u5782\u76f4\u5bf9\u9f50<\/strong>\u65b9\u5f0f\u3002<\/p>\n\n\n\n

\u6ce8\u610f<\/strong>\uff1avertical-align<\/code> \u5bf9\u5757\u7ea7\u5143\u7d20\u65e0\u6548\u3002<\/p>\n\n\n\n

\u8be5\u5c5e\u6027\u7684\u8be6\u7ec6\u53d6\u503c\u89c1\u6587\u672b\u3002<\/p>\n\n\n\n

\u793a\u4f8b\uff1a\u56fe\u6587\u5782\u76f4\u5bf9\u9f50<\/h2>\n\n\n
<style>\n.demo {\n   background: red;\n   width: 200px;\n}\n.img {\n   vertical-align: [top\/bottom\/midddle];\n}\n<\/style>\n\n<div class=\"demo\">\n   <img class=\"img\" src=\"https:\/\/huajimc.cn\/static\/img\/avatar.jpg\" height=\"100\">\n   <span>\u6211\u662f\u6ed1\u7a3dmc\u3002 <\/span>\n<\/div><\/code><\/pre>\n\n\n
\u9ed8\u8ba4\u6548\u679c\uff08vertical-align: baseline<\/code>\uff09\uff1a<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u9876\u90e8\u5bf9\u9f50\uff08vertical-align: top<\/code>\uff09<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u5e95\u90e8\u5bf9\u9f50\uff08vertical-align: bottom<\/code>\uff09<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u5c45\u4e2d\u5bf9\u9f50\uff08vertical-align: middle<\/code>\uff09<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u53bb\u9664\u56fe\u7247\u5e95\u90e8\u7684\u7a7a\u767d\u7f1d\u9699<\/h3>\n\n\n\n
\u6ce8\u610f\u770b\u4e0a\u9762\u9ed8\u8ba4\u60c5\u51b5\u7684\u56fe\u7247\uff0c\u5934\u50cf\u4e0e\u7236\u5bb9\u5668\u76d2\u5b50\u5e95\u90e8\u5b58\u5728\u4e00\u6bb5\u7a7a\u9699\u3002\u8fd9\u662f\u56e0\u4e3a\u884c\u5185\u5143\u7d20\u7684\u9ed8\u8ba4\u5782\u76f4\u5bf9\u9f50\u65b9\u5f0f\u662f baseline<\/code>\uff0c\u5373\u4e0e\u7236\u5143\u7d20\u7684\u57fa\u7ebf\u5bf9\u9f50\uff0c\u800c\u7236\u5143\u7d20\u57fa\u7ebf\u901a\u5e38\u4f4d\u4e8e\u6587\u672c\u5e95\u90e8\uff08\u5b57\u6bcd x \u7684\u4e0b\u8fb9\u7f18\uff09\uff0c\u5bfc\u81f4\u56fe\u7247\u4e0b\u65b9\u7559\u767d\u3002<\/p>\n\n\n\n
\u89e3\u51b3\u65b9\u6cd5\u6709\u4e24\u79cd<\/p>\n\n\n\n
    \n
  1. \u7ed9 img \u8bbe\u7f6e vertical-align<\/code> \u5c5e\u6027\u4e3a top|bottom|middle<\/code> \u7b49\uff0c\u4e0d\u8981\u7528\u9ed8\u8ba4\u7684\u57fa\u7ebf\u5bf9\u9f50<\/li>\n\n\n\n
  2. \u7ed9 img \u8bbe\u7f6e display: block<\/code> \u8f6c\u5316\u4e3a\u5757\u7ea7\u5143\u7d20<\/li>\n<\/ol>\n\n\n\n
    \u6b64\u5916\uff0c\u8868\u683c\u5355\u5143\u683c\u7684\u5782\u76f4\u5bf9\u9f50\u4e5f\u7531 vertical-align<\/code> \u63a7\u5236\uff0c\u5177\u4f53\u53ef\u89c1\u6587\u672b\u5c5e\u6027\u503c\u7b2c3\u6761\u3002<\/p>\n\n\n\n
    vertical-align \u5c5e\u6027\u503c<\/h2>\n\n\n\n
    1. \u76f8\u5bf9\u7236\u5143\u7d20\u7684\u503c<\/h3>\n\n\n\n
    \u8fd9\u4e9b\u503c\u4f7f\u5143\u7d20\u76f8\u5bf9\u5176\u7236\u5143\u7d20\u5782\u76f4\u5bf9\u9f50\uff1a<\/p>\n\n\n\n
    \u503c<\/strong><\/td>\u4f5c\u7528<\/strong><\/td><\/tr>
    baseline<\/code><\/td>\u9ed8\u8ba4\u503c\uff0c\u4f7f\u5143\u7d20\u7684\u57fa\u7ebf\u4e0e\u7236\u5143\u7d20\u7684\u57fa\u7ebf\u5bf9\u9f50<\/td><\/tr>
    middle<\/code><\/td>\u4f7f\u5143\u7d20\u7684\u4e2d\u90e8\u4e0e\u7236\u5143\u7d20\u7684\u57fa\u7ebf\u52a0\u4e0a\u7236\u5143\u7d20 x-height<\/code> \u7684\u4e00\u534a\u5bf9\u9f50<\/td><\/tr>
    text-top<\/code><\/td>\u4f7f\u5143\u7d20\u7684\u9876\u90e8\u4e0e\u7236\u5143\u7d20\u6587\u5b57\u7684\u9876\u90e8\u5bf9\u9f50<\/td><\/tr>
    text-bottom<\/code><\/td>\u4f7f\u5143\u7d20\u7684\u5e95\u90e8\u4e0e\u7236\u5143\u7d20\u6587\u5b57\u7684\u5e95\u90e8\u5bf9\u9f50<\/td><\/tr>
    sub<\/code><\/td>\u4f7f\u5143\u7d20\u7684\u57fa\u7ebf\u4e0e\u7236\u5143\u7d20\u7684\u4e0b\u6807\u57fa\u7ebf\u5bf9\u9f50<\/td><\/tr>
    super<\/code><\/td>\u4f7f\u5143\u7d20\u7684\u57fa\u7ebf\u4e0e\u7236\u5143\u7d20\u7684\u4e0a\u6807\u57fa\u7ebf\u5bf9\u9f50<\/td><\/tr>
    <\/code><\/td>\u4f7f\u5143\u7d20\u7684\u57fa\u7ebf\u5bf9\u9f50\u5230\u7236\u5143\u7d20\u7684\u57fa\u7ebf\u4e4b\u4e0a\u7684\u7ed9\u5b9a\u957f\u5ea6\u3002\u53ef\u4ee5\u662f\u8d1f\u6570<\/td><\/tr>
    <\/code><\/td>\u4f7f\u5143\u7d20\u7684\u57fa\u7ebf\u5bf9\u9f50\u5230\u7236\u5143\u7d20\u7684\u57fa\u7ebf\u4e4b\u4e0a\u7684\u7ed9\u5b9a\u767e\u5206\u6bd4\uff0c\u8be5\u767e\u5206\u6bd4\u662f line-height<\/code> \u5c5e\u6027\u7684\u767e\u5206\u6bd4\u3002\u53ef\u4ee5\u662f\u8d1f\u6570<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    \u6ca1\u6709\u57fa\u7ebf\u7684\u5143\u7d20\uff0c\u4f7f\u7528\u5916\u8fb9\u8ddd\u7684\u4e0b\u8fb9\u7f18\u66ff\u4ee3\u3002<\/p>\n\n\n\n
    2. \u76f8\u5bf9\u884c\u7684\u503c<\/h3>\n\n\n\n
    \u4e0b\u5217\u503c\u4f7f\u5143\u7d20\u76f8\u5bf9\u6574\u884c\u5782\u76f4\u5bf9\u9f50\uff1a<\/p>\n\n\n\n
    \u503c<\/strong><\/td>\u4f5c\u7528<\/strong><\/td><\/tr>
    top<\/code><\/td>\u4f7f\u5143\u7d20\u53ca\u5176\u540e\u4ee3\u5143\u7d20\u7684\u9876\u90e8\u4e0e\u6574\u884c\u7684\u9876\u90e8\u5bf9\u9f50<\/td><\/tr>
    bottom<\/code><\/td>\u4f7f\u5143\u7d20\u53ca\u5176\u540e\u4ee3\u5143\u7d20\u7684\u5e95\u90e8\u4e0e\u6574\u884c\u7684\u5e95\u90e8\u5bf9\u9f50<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    3. \u8868\u683c\u5355\u5143\u683c\u7684\u503c<\/h3>\n\n\n\n
    \u503c<\/strong><\/td>\u4f5c\u7528<\/strong><\/td><\/tr>
    top<\/code><\/td>\u4f7f\u5355\u5143\u683c\u5185\u8fb9\u8ddd\u7684\u4e0a\u8fb9\u7f18\u4e0e\u8be5\u884c\u9876\u90e8\u5bf9\u9f50<\/td><\/tr>
    middle<\/code><\/td>\u4f7f\u5355\u5143\u683c\u5185\u8fb9\u8ddd\u76d2\u6a21\u578b\u5728\u8be5\u884c\u5185\u5c45\u4e2d\u5bf9\u9f50<\/td><\/tr>
    bottom<\/code><\/td>\u4f7f\u5355\u5143\u683c\u5185\u8fb9\u8ddd\u7684\u4e0b\u8fb9\u7f18\u4e0e\u8be5\u884c\u5e95\u90e8\u5bf9\u9f50<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    CSS \u7684 vertical-align \u5c5e\u6027\uff0c\u7528\u4e8e\u63a7\u5236\u5143\u7d20\u7684\u5782\u76f4\u5bf9\u9f50\u65b9\u5f0f\u3002\u53ef\u7528\u6765\u5b9e\u73b0\u884c\u5185\u56fe\u6587\u5782\u76f4\u5c45\u4e2d\u5bf9\u9f50\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"emotion":"","emotion_color":"","title_style":"","license":"","footnotes":""},"categories":[4],"tags":[11,13,12],"class_list":["post-61","post","type-post","status-publish","format-standard","hentry","category-web","tag-css","tag-vertical-align","tag-12"],"_links":{"self":[{"href":"https:\/\/blog.huajimc.cn\/index.php\/wp-json\/wp\/v2\/posts\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.huajimc.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.huajimc.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.huajimc.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.huajimc.cn\/index.php\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":25,"href":"https:\/\/blog.huajimc.cn\/index.php\/wp-json\/wp\/v2\/posts\/61\/revisions"}],"predecessor-version":[{"id":93,"href":"https:\/\/blog.huajimc.cn\/index.php\/wp-json\/wp\/v2\/posts\/61\/revisions\/93"}],"wp:attachment":[{"href":"https:\/\/blog.huajimc.cn\/index.php\/wp-json\/wp\/v2\/media?parent=61"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.huajimc.cn\/index.php\/wp-json\/wp\/v2\/categories?post=61"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.huajimc.cn\/index.php\/wp-json\/wp\/v2\/tags?post=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}