整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端开发之CSS图片水平、垂直居中显示

过前端开发的朋友都知道,要使文字在一个div容器垂直居中显示是很简单的事,但是如果是要让一张图片在div容器中垂直显示那就有点伤脑筋了,因为图片是个置换元素,有些特殊的特性,对于前端开发的大牛来说还好,解决方法有很多,比如什么利用js啊之类的,但是这些对于初学者来说就有些难度了,今天小编就把自己平时在项目中用的方法分享给大家,给大家一个参考。

其实小编用的方法也不是什么很高端的技术,算是最low的方法吧,但是很实用,能兼容各种浏览器,为了演示,小编直接从某宝商家店铺里拿了一张商品图来做演示,因为商品图都是高清无码的,且还很大,所以我们在CSS中把图片的高度设置为200px,div容器的高度为300px,完整的代码如下:

最终的运行效果如下图:

可以看到,这个图片在div中水平、垂直都是在正中间,是不是很完美。这个原理也很简单,就是在div容器中加了个 <i> 标签并把它的 display 属性设置为 inline-block(行内块元素),让它去撑开div容器的高度,再把图片的 vertical-align 属性设置为 middle 就可以垂直居中了,当然这只是个演示,大家在实际的项目中可以利用 max-width、min-width、max-height、min-height 等属性让图片根据需要自适应,以达到想要的效果。

当然解决方法还有很多种,具体用什么方法需根据自身页面布局去权衡,总之没有最好的,只有最适合的,如果你有更好的方法也可以告诉小编哦,一起交流方法,共同进步。

lexbox

通常首选方法是使用flexbox居中内容。只需三行代码即可:display:flex,然后使用 align-items:center justify-content:center 将子元素垂直和水平居中。

如下代码:

html:

<div class="flexbox-centering">
  <div>Centered content.</div>
</div>

css:

.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

Grid

使用grid(网格)与flexbox非常相似,也是一种常见的技术,尤其是布局中已经使用网格的情况下。与前一种flexbox技术的唯一区别是它显示为栅格。

如下代码:

html:

<div class="grid-centering">
  <div class="child">Centered content.</div>
</div>

css:

上效果图:

这是一个用ext3.2.0、js、html、css写的一个还算好看的登录界面。

源代码已上传,下载地址请点击:点击打开链接

其主要难点在如何使用extjs来画一个界面,接下来我们就主要看一下其中的html和js吧:


  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>登录界面</title>
  6. <link rel="stylesheet" type="text/css" href="ext3.2.0/resources/css/ext-all.css"/>
  7. <script type="text/javascript" src="ext3.2.0/adapter/ext/ext-base.js"></script>
  8. <script type="text/javascript" src="ext3.2.0/ext-all.js"></script>
  9. <script type="text/javascript" src="login.js"></script>
  10. <script type="text/javascript" src="loginToDo.js"></script>
  11. <link rel="stylesheet" type="text/css" href="login.css"/>
  12. </head>
  13. <body onkeydown="keyLogin(event);">
  14. </body>
  15. </html>

这里面主要是导入页面所需的js和css文件,当然还有一个亮点就是body标签上的 onkeydown事件属性,主要用于监听键盘实现我们js中的enter键提交功能。然后看一下extjs的语言风格吧:


  1. Ext.onReady(function () {
  2. // 创建“登录”面板
  3. var loginPanel = new Ext.Panel({
  4. // 设置面板的位置、宽高、样式
  5. // 注意:此处我用的是相对布局relative(用于比较两者的区别)
  6. id: 'loginPan',
  7. x: 363,
  8. y: 0,
  9. width: 396,
  10. height: 480,
  11. baseCls: '',
  12. defaults: {
  13. border: false
  14. },
  15. // 添加面板里面的物品
  16. items: [
  17. {
  18. // 第一件:logo图
  19. id: 'loginLogo',
  20. height: 160,
  21. frame: false,
  22. bodyStyle: 'padding-top:10px',
  23. html: '<img src="images/fly_icon.png">'
  24. },
  25. {
  26. // 第二件:登录的表单
  27. id: 'loginForm',
  28. defaultType: 'textfield',
  29. frame: false,
  30. defaults: {
  31. allowBlank: false
  32. },
  33. // 添加表单里面的物品:两个输入框
  34. items: [
  35. {
  36. id: "username",
  37. cls: "text_field",
  38. inoutType: 'text',
  39. width: 330,
  40. height: 28,
  41. blankText: '账号不能为空',
  42. emptyText: '请输入账号',
  43. },
  44. {
  45. id: "password",
  46. cls: "text_field",
  47. inputType: 'password',
  48. width: 330,
  49. height: 28,
  50. emptyText: '请输入密码',
  51. blankText: '密码不能为空',
  52. }]
  53. },
  54. {
  55. // 第三件:忘记密码
  56. id: 'loginForget',
  57. html: "<a href='forget_pwd.html' target='_blank'>忘记密码?</a>",
  58. },
  59. {
  60. // 第四件:登录按钮
  61. id: 'loginBtn',
  62. html: '<button id="btn_login">马上登录</button>',
  63. }
  64. ],
  65. });
  66. // 创建“注册”面板
  67. var registerPanel = new Ext.Panel({
  68. // 设置面板的位置、宽高、样式
  69. // 注意:此处我用的是绝对布局absolute(用于比较两者的区别)
  70. id: 'registerPan',
  71. x: 0,
  72. y: 46,
  73. width: 800,
  74. height: 389,
  75. baseCls: '',
  76. layout: 'absolute',
  77. defaults: {
  78. border: false
  79. },
  80. // 添加面板里面的物品
  81. items: [
  82. {
  83. // 第一件:标题
  84. id: 'registerTitleLabel',
  85. xtype: 'label',
  86. x: 47,
  87. y: 50,
  88. text: '还没有账号?',
  89. }, {
  90. // 第二件:正文
  91. id: 'registerContentLabel',
  92. xtype: 'label',
  93. x: 47,
  94. y: 135,
  95. text: '这是在注册面板下面的正文内容。里面的内容可以随便写,比如当前我们再一个窗口下面建立了两个面板。而两个面板的布局是分别用相对布局和绝对布局来实现的。相比较而言,我觉得用绝对布局会简单粗暴,更直接,更方便。总之,你们自己体会一下吧。',
  96. }, {
  97. // 第三件:注册按钮
  98. id: 'registerBtn',
  99. xtype: 'button',
  100. x: 47,
  101. y: 280,
  102. html: '<button id="btn_register" >马上注册</button>'
  103. }],
  104. });
  105. // 创建窗口,从而让内容达到居中效果
  106. var centerWindow = new Ext.Window({
  107. baseCls: '',
  108. width: 800,
  109. height: 480,
  110. layout: 'absolute',
  111. closable: false,
  112. draggable: false,
  113. resizable: false,
  114. shadow: false,
  115. border: false,
  116. items: [registerPanel, loginPanel],
  117. });
  118. // 显示窗口
  119. centerWindow.show();
  120. // 添加浏览器缩放自动居中效果
  121. Ext.EventManager.onWindowResize(function () {
  122. centerWindow.center();
  123. });
  124. });

这里要说的是:1、注意给属性加标记,能用id就用id,cls只是一个封装过的class,和原生的class还是有区别的,比如给一个cls元素的height、padding定义样式并不起作用。详见:关于extjs中的cls ≠ class

2、在ext中建议用绝对定位,由于它底层是一个个的table、div块,如果用相对定位的话偶尔是有偏差的,所以还是绝对定位方便直接啊。

3、window自带居中效果,可以利用这一点让元素在屏幕中居中。但是当浏览器缩放的时候,这个window并不会动,每次都需要重新刷新一下才会改变一下。所以,在以上代码的最后我们用给这个centerWindow添加了一个窗口自适应居中的效果。