<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0"/> <meta name="format-detection" content="telephone=no"> <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script> <title>订单记录</title> <style> .box1 { text-align: center; line-height: 300px; border:1px solid #f00; } .box1 img { width:100px; vertical-align: middle; margin-top:-4px; } .content-box { line-height: 300px; text-align: center; border:1px solid #f00; } .content { width: 500px; display: inline-block; vertical-align: middle; line-height: 21px; text-align:left; margin-top:-4px; } .box2{ text-align: center; line-height: 300px; border:1px solid #f0f; } .box2 img { width:100px; vertical-align: middle; } .assist { /* 第二步，0宽度100%高度的辅助元素 */ display: inline-block; height: 100%; /* 第三步，图片和辅助元素同时垂直居中对齐 */ vertical-align: middle; } .box{ text-align: center; line-height: 100px; border:1px solid #000; } /*想用vertical-align: middle;必须添加上display: inline-block;或者display: inline;*/ .box img{ vertical-align: middle; } .box span{ width:310px; line-height: 21px; display: inline-block; vertical-align: middle; } .flex{ margin-bottom: 10px; padding: 20px; width: 100%; height: 300px; background: #f5f5f5; border: 1px solid #eee; /* flex写法 */ display: flex; justify-content: center;/*水平居中*/ align-items: center;/*垂直居中*/ } </style> </head> <body> <h2>示例一</h2> <div class="box1"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536662940402&di=5e1aa1e14a26be34e84b66ccfd66d70e&imgtype=0&src=http%3A%2F%2Fp9.qhimg.com%2Ft01a7db8b5d562f3dd8.jpg" /> </div> <h2>示例二</h2> <div class="content-box"> <div class="content">我是多行文本。多行文本水平垂直居中的原理跟上一页图片的实现是一样的，区别在于要把多行文本所在的容器的display水平转换成和图片一样的，也就是inline-block，以及重置外部继承的text-align和line-height属性值。</div> </div> <h2>示例三</h2> <div class="box2"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536662940402&di=5e1aa1e14a26be34e84b66ccfd66d70e&imgtype=0&src=http%3A%2F%2Fp9.qhimg.com%2Ft01a7db8b5d562f3dd8.jpg" /> <span class="assist"></span> </div> <h2>示例四</h2> <div class="box"> <span>单行文字</span> <img src="https://img1.mukewang.com/user/57a6f85b00013c7202090209-40-40.jpg" alt=""> </div> <div class="box"> <span>多行文字<br />文字文字文字文字<br />文字文字文字文字</span> <img src="https://img1.mukewang.com/user/57a6f85b00013c7202090209-40-40.jpg" alt=""> </div> <div class="box"> <span>因为vertical-align只对inline/inline-block元素起作用，而浮动会让元素block水平化，就不能使用vertical-align对齐了</span> <img src="https://img1.mukewang.com/user/57a6f85b00013c7202090209-40-40.jpg" alt=""> </div> <h2>示例五</h2> <div class="flex xingorg1"> <span>不会搞艺术的程序员不是好的设计师 _xing.org1^ 不会搞艺术的程序员不是好的设计师 _xing.org1^ </span> </div> </body> </html> <script type="text/javascript" src="FileUpload.js"></script> <script type="text/javascript" src="swfobject.js"></script> <script> </script>
