1.css實現一行文字居中，多行文字左對齊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> /*當文字為一行時，P的寬度小於div的寬度，而且p標簽居中顯示在盒子內則，盡管元素本身設置了文字左對齊，視覺上水平居中了。 * 當大於一行時，P的寬度（inline-block）和div的寬度是一致的 ,元素本身社會了文字左對齊，所以文字就居左對齊了*/ .content { width: 200px; border: 1px solid #ee2415; text-align: center ;padding: 2px 5px} /*display: inline-block使P的寬度根據文字的寬度伸縮 */ .content p { text-align: left; display: inline-block } </style> <body> <div class="content"> <p>內容只有一行居中</p> </div> <br> <div class="content"> <p>內容多行左對齊，內容多行左對齊</p> </div> <div style="width: 600px;border: 1px solid red;text-align: center;"> <p style="display: inline-block;">父元素text-align: center;子元素inline-block會水平居中</p> </div> </body> </html>
2.響應式圖片的設置方式，多行文字和圖片的水平垂直居中
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> body{ max-width: 640px; margin: 0 auto; } *{margin: 0;padding: 0;} .parent{ overflow: hidden; } #con{ float: left; width: 50%; height: 200px; line-height: 200px; border: 1px solid #000; box-sizing: border-box; text-align: center; background: red; } #con:after{ content: ''; display: inline-block; vertical-align: middle; height: 100%; } img{ width: auto; max-width: 100%; vertical-align: middle; height: auto; max-height: 100%; } .text{ float: left; width: 50%; height: 200px; line-height: 200px; border: 1px solid #000; box-sizing: border-box; text-align: center; } .text:after{ content: ''; display: inline-block; vertical-align: middle; height: 100%; } .text p{ vertical-align: middle; display: inline-block; word-break: break-all; line-height: initial; } </style> </head> <body> <div class="parent"> <div id="con"> <img id="example" src="img/2.png" alt="" /> </div> <div class="text"> <p>中華人民共和國中華人民共和國中華人民共和國中華人民共和國</p> </div> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> (function($){ var props = ['Width', 'Height'], prop; while (prop = props.pop()) { (function (natural, prop) { $.fn[natural] = (natural in new Image()) ? function () { return this[0][natural]; } : function () { var node = this[0], img, value; if (node.tagName.toLowerCase() === 'img') { img = new Image(); img.src = node.src, value = img[prop]; } return value; }; }('natural' + prop, prop.toLowerCase())); } }(jQuery)); // 如何使用: var nWidth = $('img#example').naturalWidth(), nHeight = $('img#example').naturalHeight(); console.log(nWidth) console.log(nHeight) </script> </body> </html>