div文字左右上下居中方法

1、要想让图片左右对齐,我们可以在div里写入"style:text-align:center;"代码来实现。

  2、要想使图片居中,多数人可能会考虑使用"vertical-align:middle"代码。这样加上后发现却没有出现效果。

  IE、firefox浏览器的逐步解决方法:

  1)针对图片设置如下代码:style="_margin-top: expression_r(( 300 - this.height ) / 2)";发现在IE6下效果实现了。
  而IE7和firefox,没有变化。

  2)再在div里写入"line-height:300px;vertical-align:middle",发现IE7这时候也有效果了。
  但firefox图片还没垂直居中。

  (这里的"line-height:300px"是根据div的高度确定的。)

  3)再对div增加样式:"display:table-cell",现在看看firefox也好了。

  举例代码:

  < div style=”300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell”>
  < img src=”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: expression_r(( 300 - this.height ) / 2);” />
  < /div >

总结:

宽度:text-align:center

高度,"line-height(设置的高度要与div高度一致)

vertical-align:middle(可用可不用)

 
  • 相关阅读:
    电脑使用优化工具方法
    算法练习的网站
    golang 实现链表反转打印
    刷过的算法题
    Symfony2框架实战教程——第六天#Alt:验证码
    Symfony2框架实战教程——第六天:模板重载与翻译
    [Symfony2] 在命令或控制器里跑另一个命令的N种方法
    Symfony2框架实战教程——第五天:KnpMenuBundle创建菜单项+结合Twitter Boostrap3
    Symfony2框架实战教程——第四天#Alt:用FOSUserBundle实现用户注册和登录
    Symfony2框架实战教程——第四天:用HWIOAuthBundle实现第三方登录
  • 原文地址:https://www.cnblogs.com/zhangnaitao/p/5823234.html
  • 1、要想让图片左右对齐,我们可以在div里写入"style:text-align:center;"代码来实现。

      2、要想使图片居中,多数人可能会考虑使用"vertical-align:middle"代码。这样加上后发现却没有出现效果。

      IE、firefox浏览器的逐步解决方法:

      1)针对图片设置如下代码:style="_margin-top: expression_r(( 300 - this.height ) / 2)";发现在IE6下效果实现了。
      而IE7和firefox,没有变化。

      2)再在div里写入"line-height:300px;vertical-align:middle",发现IE7这时候也有效果了。
      但firefox图片还没垂直居中。

      (这里的"line-height:300px"是根据div的高度确定的。)

      3)再对div增加样式:"display:table-cell",现在看看firefox也好了。

      举例代码:

      < div style=”300px;height:300px;text-align:center;vertical-align:middle;line-height:300px;border:1px solid #ccc;display:table-cell”>
      < img src=”aaaa.jpg” mce_src=”aaaa.jpg” style=”_margin-top: expression_r(( 300 - this.height ) / 2);” />
      < /div >

    总结:

    宽度:text-align:center

    高度,"line-height(设置的高度要与div高度一致)

    vertical-align:middle(可用可不用)