zoukankan      html  css  js  c++  java
  • 问题2:css图片、文字居中

    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>
  • 相关阅读:
    如何查看ubuntu版本
    基于Python与命令行人脸识别项目(系列一)
    问题 B: Curriculum Vitae
    问题 M: 克隆玩具
    1906: 鹊桥相会
    3265: 聪明的矿工
    2363: 完美旗手队列
    2545: 内部收益率
    2544: 台球碰撞
    3272: 公民身份号码
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/10103941.html
Copyright © 2011-2022 走看看