zoukankan      html  css  js  c++  java
  • 让图片在div 中居中的方法

    方法一:

      思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中。

      结构如下:

      <div>

      <img src="images/tt.gif" width="150" height="100" />

      </div>

      CSS样式如下:

      div {300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}

      运行结果如下:

      

                              

    方法二:

      思路:只用padding属性,通过计算求得居中

      结构代码同上;

      CSS样式如下:

      div {225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}

      备注:这里DIV的宽高计算都遵循盒模型原理,计算方法同上。

      方法三:

      思路:

      利用图片的margin属性将图片水平居中,利用DIV的padding属性将图片垂直居中。

      结构代码同上;

      CSS代码如下:

      div {300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}

      img {display:block; margin:0 auto;}

      备注:

      Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中;(有的设计师为图片再加个div标签,然后通过div标签的margin实现居中

         http://zhidao.baidu.com/link?url=u2Sh1t3AcCqRjd0isIK27_rim1eSx06HmTItZPvfeazgj2mYFluTLzpWfOFqzIUyvikhSTRRizI3h680woVInq

  • 相关阅读:
    cookie和session详解
    MacOS Sierra10.12.4编译Android7.1.1源代码必须跳的坑
    LeetCode——4Sum &amp; 总结
    C#深拷贝
    iOS9中怎样注冊远程通知
    hdu1542 Atlantis (线段树+扫描线+离散化)
    HTML杂记
    OpenCV中图像算术操作与逻辑操作
    java集群优化——ORM框架查询优化原理
    RVM切换ruby版本号
  • 原文地址:https://www.cnblogs.com/beihaibei/p/5865514.html
Copyright © 2011-2022 走看看