問題2：css圖片、文字居中
阿新 • • 發佈：2018-12-20
1. 文字或圖片水平對齊:父元素中新增以下樣式
text-align : center;
2. 單行文字垂直對齊:父元素中新增以下樣式
line-height : 父元素高度;
3.圖片水平及垂直居中方法一：
利用display：flex....配合margin:auto即可實現，附程式碼
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>圖片垂直水平居中</title> 6 <style> 7 .flex-container { 8 display: -webkit-flex; 9 display: flex; 10 width: 400px; 11 height: 250px; 12 background-color: lightgrey; 13 } 14 15 .flex-item { 16 background-color: cornflowerblue; 17 width: 75px; 18 height: 75px; 19 margin: auto; 20 } 21 </style> 22 </head> 23 <body> 24 25 <div class="flex-container"> 26 <div class="flex-item">Perfect centering!</div> 27 </div> 28 29 </body> 30 </html>
圖片水平垂直居中方法二：利用position:absolute
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>圖片居中</title> 7 11 <style type="text/css"> 12 .loading { 13 width: 100%; 14 height: 100%; 15 position: fixed; 16 top: 0; 17 left: 0; 18 background: #eee; 19 } 20 .loading img{ 21 position: absolute; 22 top: 0; 23 left: 0; 24 bottom: 0; 25 right: 0; 26 margin: auto; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="loading"> 32 <img src="img/Flower.gif" > 33 </div> 34 </body> 35 </html>