首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

网页元素居中的n种方法

场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 一个元素,它还有可能有个父级元素,那我要它居中于其父级元素 一个元素,它也有可能还带有一些子内容,我要让它的子内容居中 场景建模 根据场景分析提出的一些假设...搞父子元素居中对齐 ? 搞元素背景居中对齐 ? 搞元素内容居中对齐 ?...背景居中 我们做这样一件事,在一个div容器中,我们通过background-image属性引入一张背景,之后我们期望这张引入的背景呢,它能够水平垂直居中于宿主元素。...text-algin:center可以使内容水平居中于宿主元素,将line-height设置成宿主元素相同的高度,便可让宿主元素垂直居中。...其他网页设计基础总结:https://ataola.github.io/show/ 参考文献 https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position

93240

CSS banner图响应式居中显示

图片 在 PC 网站首页,banner 图作为网页中最大的一张图片,在传达网页的的主要信息的同时,也吸引着浏览者的所有注意力,所以 banner 图的展示方式直接影响着用户的体验,今天我们就来聊聊 banner...图如何在不同尺寸的视口中居中显示 我们都知道,通过background-size: cover;属性能够将图片居中显示,但在窗口拉伸的过程中,图片往往很随着拉伸而变得惨不忍睹,所以我们可以将图片独立出来...,并通过隐藏图片两侧的方式,来达到 banner 图在不同尺寸下居中显示的目的 HTML 结构如下 !...width: 1920px; margin: 0 -355px; vertical-align: middle; } 当视口宽度与图片宽度同为 1920 px 时,Nian 糕正好处于视图居中位置...,页面效果如下图所示 当视口宽度为 1210 px 时,Nian 糕依旧在视图中居中显示,如下图所示 本篇的内容到这里就全部结束了,源码我已经发到了 GitHub Source_code 上了,有需要的同学可自行下载

2.2K30
领券