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

  • 相关阅读:
    令我印象最深刻的三个老师
    硬盘大于2T安装CentOS7.X时要注意分区
    Linux网卡配置
    Python13:文件操作
    Python12:集合
    Python11:字典
    Python10:String字符串
    Python09:元组
    Python08:列表
    Python07:模块初识
  • 原文地址:https://www.cnblogs.com/beihaibei/p/5865514.html
Copyright © 2011-2022 走看看