{"id":661,"date":"2013-07-02T16:58:43","date_gmt":"2013-07-02T08:58:43","guid":{"rendered":"http:\/\/www.bluesdream.com\/blog\/?p=661"},"modified":"2013-07-15T10:11:33","modified_gmt":"2013-07-15T02:11:33","slug":"images-text-horizontal-and-vertical-centering","status":"publish","type":"post","link":"https:\/\/www.bluesdream.com\/blog\/images-text-horizontal-and-vertical-centering.html","title":{"rendered":"\u56fe\u7247\u3001\u6587\u5b57\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\uff08\u517c\u5bb9\u5404\u6d4f\u89c8\u5668\uff09"},"content":{"rendered":"

\u56fe\u7247\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u3001\u6587\u5b57\uff08\u591a\u884c\u6587\u5b57\uff09\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\uff0c\u8fd9\u662f\u4e2a\u8001\u751f\u5e38\u8c08\u7684\u95ee\u9898\uff0c\u4e5f\u7ecf\u5e38\u6709\u4eba\u63d0\u53ca\u8fd9\u4e2a\u95ee\u9898\uff0c\u81f3\u6b64\u5199\u4e2a\u6848\u4f8b\u4f5c\u4e3a\u5907\u5fd8\u3002<\/p>\n

\u4e3b\u8981\u7528\u5230\u7684CSS\u5c5e\u6027\u5c31\u662fdisplay:table-cell[\u6307\u5b9a\u5bf9\u8c61\u4f5c\u4e3a\u8868\u683c\u5355\u5143\u683c\u3002\u7c7b\u540c\u4e8ehtml\u7684td\u6807\u7b7e]\u3002\u5e94\u7528\u4e0e\u5df2\u77e5\u5916\u5c42\u5bb9\u5668\u5bbd\u9ad8\uff0c\u4f46\u5185\u90e8\u56fe\u7247\u5927\u5c0f\u548c\u6587\u5b57\u6570\u91cf\u672a\u77e5\u7684\u60c5\u51b5\u3002<\/p>\n

\u6ce8\uff1a\u4f7f\u7528display:table-cell\u7684\u65f6\u5019\uff0c\u5f53\u524d\u5143\u7d20\u4e0d\u652f\u6301margin\u548cposition\u5c5e\u6027\uff0c\u8fd9\u4e2a\u95ee\u9898\u5f80\u5f80\u5bb9\u6613\u88ab\u4eba\u5ffd\u7565\u3002<\/p>\n

CSS CODE:<\/strong><\/p>\n

\r\nbody{ background:#202429; font-size:12px; line-height:18px;}\r\n\r\n\/* \u516c\u7528\u5bb9\u5668 *\/\r\n.box{\r\n\tposition:relative;\r\n\twidth:200px;\r\n\theight:200px;\r\n\tmargin:40px auto 0 auto;\r\n\tbackground:#282d33;\r\n\tborder:solid 1px #171717;\r\n\tbox-shadow:inset 0 0 1px rgba(255,255,255,0.4);\r\n\tcolor:#bbb;\r\n}\r\n.box .tag{\r\n\tposition:absolute; top:-11px; left:70px;\r\n\twidth:60px; height:20px;\r\n\tbackground:#1b1b1b;\r\n\tborder:solid 1px #171717;\r\n\ttext-align:center;\r\n}\r\n\r\n\/* IE6+ \u652f\u6301\u56fe\u7247\u548c\u591a\u884c\u6587\u5b57\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d *\/\r\n.ie_imgText {\r\n\tdisplay:table;\r\n\twidth:200px;\r\n\theight:200px;\r\n\ttext-align:center;\r\n\t*position:relative;\r\n}\r\n.ie_imgText .cell {\r\n\tvertical-align:middle;\r\n\tdisplay:table-cell;\r\n\t*position:absolute;\r\n\t*top:50%;\r\n\t*left:50%;\r\n}\r\n.ie_imgText .content {\r\n\t*position:relative;\r\n\t*top:-50%;\r\n\t*left:-50%;\r\n}\r\n\r\n\/* IE6+ \u56fe\u7247\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d *\/\r\n.ie_img {\r\n\tdisplay:table-cell;\r\n\tvertical-align:middle;\r\n\ttext-align:center;\r\n\twidth:200px;\r\n\theight:200px;\r\n\t*display:block;\r\n\t*font-size:175px; \/* 0.875 *\/\r\n}\r\n.ie_img img {\r\nvertical-align:middle;\r\n}\r\n\r\n\/* IE7+ *\/\r\n.ie6_getOut {\r\n\twidth:200px;\r\n\theight:200px;\r\n\tdisplay:table-cell;\r\n\ttext-align:center;\r\n\tvertical-align:middle;\r\n\t*line-height:200px; \/* IE7 HACK *\/\r\n}\r\n<\/pre>\n
HTML CODE:<\/strong><\/p>\n
\r\n<div class="box">\r\n\t<div class="ie_imgText">\r\n\t\t<div class="cell">\r\n\t\t\t<div class="content">\r\n\t\t\t\t<img src="2d.png" alt="">\r\n\t\t\t\t<p>\u6587\u5b57\u6587\u5b57<\/p>\r\n\t\t\t\t<p>\u6587\u5b57\u6587\u5b57\u6587\u5b57<\/p>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>\r\n\r\n<div class="box">\r\n\t<div class="ie_img">\r\n\t\t<img src="2d.png" alt="">\r\n\t<\/div>\r\n<\/div>\r\n\r\n<div class="box">\r\n\t<div class="ie6_getOut">\r\n\t\t<img src="2d.png" alt="">\r\n\t<\/div>\r\n<\/div>\r\n<\/pre>\n
Demo1 - \u4f18\u70b9\uff1a\u517c\u5bb9\u6027\u548c\u6269\u5c55\u6027\u80fd\u5f97\u5230\u8f83\u597d\u7684\u652f\u6301\u3002\u7f3a\u70b9\uff1a\u5c42\u7ea7\u8fc7\u591a\u3002\uff09<\/span>
\nDemo2 - \u4f18\u70b9\uff1a\u666e\u666e\u901a\u901a\u3002\u7f3a\u70b9\uff1a\u9700\u8981\u8ba1\u7b97font-size \u4f1a\u6709\u7565\u5fae\u8bef\u5dee\u3002\uff09<\/span>
\nDemo3 - \u4f18\u70b9\uff1a\u4ee3\u7801\u7b80\u6d01\u5b9e\u7528\u3002\u7f3a\u70b9\uff1a\u4e0d\u652f\u6301IE6\u3002\uff09<\/span>
\n\u8fd93\u4e2a\u6817\u5b50\u5927\u5bb6\u53ef\u4ee5\u6839\u636e\u81ea\u5df1\u7684\u5b9e\u9645\u9700\u6c42\u9009\u62e9\u3002<\/span><\/p>\n
Demo<\/a>Download<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u56fe\u7247\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\u3001\u6587\u5b57\uff08\u591a\u884c\u6587\u5b57\uff09\u6c34\u5e73\u5782\u76f4\u5c45\u4e2d\uff0c\u8fd9\u662f\u4e2a\u8001\u751f\u5e38\u8c08\u7684\u95ee\u9898\uff0c\u4e5f\u7ecf\u5e38\u6709\u4eba\u63d0\u53ca\u8fd9\u4e2a\u95ee\u9898\uff0c\u81f3\u6b64\u5199\u4e2a\u6848\u4f8b\u4f5c\u4e3a\u5907\u5fd8\u3002 \u4e3b\u8981\u7528\u5230\u7684CSS\u5c5e\u6027\u5c31\u662fdisplay:table-cell[\u6307\u5b9a\u5bf9\u8c61\u4f5c\u4e3a\u8868\u683c\u5355\u5143\u683c\u3002\u7c7b\u540c\u4e8ehtml\u7684td\u6807\u7b7e]\u3002\u5e94\u7528\u4e0e\u5df2\u77e5\u5916\u5c42\u5bb9\u5668\u5bbd\u9ad8\uff0c\u4f46\u5185\u90e8\u56fe\u7247\u5927\u5c0f\u548c\u6587\u5b57\u6570\u91cf\u672a\u77e5\u7684\u60c5\u51b5\u3002 \u6ce8\uff1a\u4f7f\u7528display:table-cell\u7684\u65f6\u5019\uff0c\u5f53\u524d\u5143\u7d20\u4e0d\u652f\u6301margin\u548cposition\u5c5e\u6027\uff0c\u8fd9\u4e2a\u95ee\u9898\u5f80\u5f80\u5bb9\u6613\u88ab\u4eba\u5ffd\u7565\u3002<\/p>\n","protected":false},"author":1,"featured_media":662,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75],"tags":[20,106],"class_list":["post-661","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-css","tag-106"],"_links":{"self":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/661"}],"collection":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/comments?post=661"}],"version-history":[{"count":0,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/661\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media\/662"}],"wp:attachment":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media?parent=661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/categories?post=661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/tags?post=661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}