当前位置: 首页 > news >正文

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=”width: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(可用可不用)

 

 
 

转载于:https://www.cnblogs.com/zhangnaitao/p/5823234.html

相关文章:

  • return false
  • Ubuntukylin-14.04-desktop( 不带分区)安装步骤详解
  • 1:CSS中一些@规则的用法小结 2: @media用法详解
  • 【框架】[Spring]AOP拦截-三种方式实现自动代理
  • Linux下,基于EETI触屏控制器的触屏失灵解决方法
  • jquery的height()和javascript的height总结,js获取屏幕高度
  • 搭建NPM私服
  • java自动关闭资源
  • Spring+SpringMvc+Mybatis框架集成搭建教程四(项目部署及测试)
  • JS继承之寄生类继承
  • protobuf-c的使用(二)使用
  • 音视频同步(播放)原理
  • AutoCAD 2014 新特性概览
  • jvm实例,tomcat容器,spring容器,在内存中的关系
  • uboot在s3c2440上的移植(4)
  • Android组件 - 收藏集 - 掘金
  • exif信息对照
  • macOS 中 shell 创建文件夹及文件并 VS Code 打开
  • open-falcon 开发笔记(一):从零开始搭建虚拟服务器和监测环境
  • PHP那些事儿
  • Python学习笔记 字符串拼接
  • scala基础语法(二)
  • SQLServer之创建数据库快照
  • supervisor 永不挂掉的进程 安装以及使用
  • Swoft 源码剖析 - 代码自动更新机制
  • vue2.0项目引入element-ui
  • Wamp集成环境 添加PHP的新版本
  • Web设计流程优化:网页效果图设计新思路
  • 高度不固定时垂直居中
  • 互联网大裁员:Java程序员失工作,焉知不能进ali?
  • 力扣(LeetCode)21
  • 浅谈Kotlin实战篇之自定义View图片圆角简单应用(一)
  • 三分钟教你同步 Visual Studio Code 设置
  • 算法之不定期更新(一)(2018-04-12)
  • 想写好前端,先练好内功
  • 数据库巡检项
  • 曾刷新两项世界纪录,腾讯优图人脸检测算法 DSFD 正式开源 ...
  • #pragma once与条件编译
  • (Java岗)秋招打卡!一本学历拿下美团、阿里、快手、米哈游offer
  • (二)Linux——Linux常用指令
  • (附源码)ssm跨平台教学系统 毕业设计 280843
  • (剑指Offer)面试题41:和为s的连续正数序列
  • (三)mysql_MYSQL(三)
  • (一)UDP基本编程步骤
  • (已更新)关于Visual Studio 2019安装时VS installer无法下载文件,进度条为0,显示网络有问题的解决办法
  • (转)平衡树
  • .net 发送邮件
  • [ vulhub漏洞复现篇 ] Hadoop-yarn-RPC 未授权访问漏洞复现
  • [<MySQL优化总结>]
  • [Android]一个简单使用Handler做Timer的例子
  • [C# 网络编程系列]专题六:UDP编程
  • [C#]winform部署yolov5-onnx模型
  • [English]英语积累本
  • [Git 1]基本操作与协同开发
  • [iOS]Win8下iTunes无法连接iPhone版本的解决方法