DOCTYPE html> test /*上下左右居中*/ #power > span{ height:50px; /*对于center2必须指明高度*/ width: 200px; /*对于center3必须要指明宽度*/ border: 1px solid red; margin: 10px 0; } /*1. flex : ie等老式浏览器可能不支持*/ .center1...
css里怎样把字体上下居中左右居中？这是我一段代码
/*字体上下居中条件 行高=高度*//*字体左右居中条件 text-align:center*/span{ display:block; text-align:center; height:30px; line-height:30px;}2017-10-17
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>test</title> <style> /*上下左右居中*/ #power > span{ height:50px; /*对于center2必须指明高度*/ width: 200px; /*对于center3必须要指明宽度*/ border: 1px solid red; margin: 10px 0; } /*1. flex : ie等老式浏览器可能不支持*/ .center1{ display:flex; align-items:center; justify-content:center; } /*2. line-height*/ .center2{ display:block; line-height: 50px; text-align:center; } /*3. table-cell */ .center3{ display:table-cell; vertical-align:middle; text-align:center; } </style></head><body> <div id="power"></div> <script src="../js/jquery.min.js"></script> <script type="text/javascript"> $(function () { $('#power') .append('<span class="center1">上下左右居中:center1</span>') .append('<span class="center2">上下左右居中:center2</span>') .append('<span class="center3">上下左右居中:center3</span>'); }); </script> </body></html>2017-10-17
css样式文件添加#power span{ display:block; height:30px text-align:center; line-height:30px; }样式做好不要写到行间。2017-10-17
