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

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <title>图片居中</title>

         <style type="text/css">

             .loading {

                 width: 100%;

                 height: 100%;

                 position: fixed;

                 top: 0;

                 left: 0;

                 background: #eee;

             }

             .loading img{

                 position: absolute;

22                 top: 0;

23                 left: 0;

24                 bottom: 0;

25                 right: 0;

26                 margin: auto;

             }

         </style>

     </head>

     <body>

         <div class="loading">

             <img src="img/Flower.gif" >

         </div>

         </body>

 </html>

问题2：css图片、文字居中的更多相关文章

  1. css 图片文字居中

    1.单行文字居中 2.多行文字居中 3.利用background-position:center;的图片居中 4.利用display:table-cell;属性的图片居中 <!DOCTYPE h ...

  2. css图片+文字浮动（文字包围效果）

    css图片+文字浮动(文字包围效果): 在网页中,我们有时想实现这个效果,但是 <div id="test"> <img src="gdimages/0 ...

  3. css图片文字

    1.浏览器是把 html 和 css 一起下载并执行的,计算机里把两件事情同时做  异步加载.计算机中的同步异步和我们生活中的正好是相反的. 补充: 同步,是所有的操作都做完,才返回给用户结果.即写完 ...

  4. css 图片文字垂直居中

    先来看张图片 相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...

  5. CSS图片文字同行居中

    img{ display:inline-block; vertical-align:middle; }

  6. 关于css如何让图片文字居中的方法

    在将父级转换为单元格形式时,设置的相关属性  可以达到如下效果:

  7. css 图片文字对齐

    默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐 解决办法:在css中设置图片的vertical-align属性, <img src="" s ...

  8. css分割线 文字居中的7种实现方式

    最近开始研究前端,会不定期更新一些小块代码,写下自己的学习笔记,也希望能和大家一起进步! 1.单个标签实现分隔线: <html> <head lang="en"& ...

  9. 纯css 图片自适应居中

    html 结构 <div class="container"> <div class="content"></div> &l ...

  10. css图片文字一排

    <div class="footer1"> <div class="vercital-head"></div><!-- ...

随机推荐

  1. Runnable接口和Callable接口的区别。

    Callable需要实现call方法,而Runnable需要实现run方法:并且,call方法还可以返回任何对象,无论是什么对象,JVM都会当作Object来处理.但是如果使用了泛型,我们就不用每次都 ...

  2. HashMap怎样解决碰撞问题

    碰撞:HashMap运用put方法存储多个元素时,计算得出相同的hashCode,在put时出现冲突. 处理:利用“拉链法”处理HashCode的碰撞问题:当我们将键值对传递给put方法时,他调用键对 ...

  3. PT 转 PX

    pt (point,磅):是一个物理长度单位,指的是72分之一英寸. px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(D ...

  4. 深度学习原理与框架-Tensorflow基本操作-mnist数据集的逻辑回归 1.tf.matmul(点乘操作) 2.tf.equal(对应位置是否相等) 3.tf.cast(将布尔类型转换为数值类型) 4.tf.argmax(返回最大值的索引) 5.tf.nn.softmax(计算softmax概率值) 6.tf.train.GradientDescentOptimizer(损失值梯度下降器)

    1. tf.matmul(X, w) # 进行点乘操作 参数说明:X,w都表示输入的数据, 2.tf.equal(x, y) # 比较两个数据对应位置的数是否相等,返回值为True,或者False 参 ...

  5. day01-MySQL介绍

    一.MySQL的介绍 1.1.MySQL介绍 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 W ...

  6. Netty socket.io 启用Epoll 模式异常

    Epoll 环境为Linux 内核2.6 以上版本  Windows下不能启动 1:判断Linux环境 public static boolean isOSLinux() { Properties p ...

  7. U3D 贴图通道分离后为什么能减小体积

    原理上,分离与否,不会减小图片原始体积,还可能增大了. RGBA32 分离后 = RGB24 + A8,这种情况下大小没变 但压缩后就不一样了,因为RGBA32整张图的压缩过程中,每个像素是否可以压缩 ...

  8. SED命令用法整理

    sed '/Started/'q  匹配到Started字符串则退出sed命令 sed '/Started/{/in/q}'  同时匹配到Started和in两个字符时则退出sed命令 ------- ...

  9. NGUI 背景图自适应

    背景图UISprite组件调整如下: UIRoot设置: 不保持比例自适应: 保持宽与屏幕宽一致,高度随宽的缩放比例进行缩放:

  10. linux 排查page的状态问题

    最近遇到一个page的释放异常的问题,堆栈如下: [ 1000.691858] BUG: Bad page state in process server.o pfn:309d22 [ mapcoun ...