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>