皇冠电子游戏登录

皇冠电子游戏登录网络

您的当前位置:首页 > 皇冠电子游戏登录动态 > 网站建设学堂 >

自适应响应式不固定高度宽度时div图片或者其他元素上下左右居中的css方法

2020-10-18 20:10:10   来源:皇冠电子游戏登录网络   评论:0 点击:
自适应响应式网页布局时往往不能设定死高度和宽度,在宽高都没有设置固定数值时如何让元素上下左右居中呢?

左右居中比较简单 一般用  text-align:center  或者 margin:0px auto; 

上下居中其实可以使用表格,如果不用表格的话可以使用 css 属性 display:table和 display:table-cell以及vertical-align:middle;使得div具有表格上下居中的属性

  .abc{ width:100%; height:100%; display:table;}
  .x{ width:100%; height:100%; display:table-cell; vertical-align:middle;}
  <div class="abc">
  <div class="x">这里的内容会上下居中</div>
  </div>

这里不管是文字内容还是图片或者其他元素都会上下居中
 

皇冠电子游戏登录动态
网站建设学堂
网站优化学堂
网络行业皇冠电子游戏登录
皇冠电子游戏登录网络动态
推荐文章
如何查看网站哪些图片或文件影响网站打开速度?
如何让网站打开速度更快之图片压缩
大型企业网站建设需要注意的几个问题
高端企业网站建设PK低端企业网站建设
网站SEO优化是什么意思?
  • 网建
  • 优化
  • 资讯
  • 案列
  • 客服 有事点这里 有事点这里