关于页面元素在父容器里水平居中、垂直居中的问题

2019独角兽企业重金招聘Python工程师标准>>>

.container{margin-right: auto;/**容器水平居中*/margin-left: auto;width: 50%;height: 300px;border: 1px solid red;
}
.container a{margin: 5px;padding: 15px;line-height: 280px;;/**在容器里垂直居中*/
}

<div class="container"><a href="#">我要垂直居中</a>
</div>

要点：想要在父容器里垂直居中显示，直接设置line-height为父容器的高度，但是要减去margin，padding的值

公式：line-height = 父容器高度 - 子容器margin - 子容器padding

转载于:https://my.oschina.net/u/233090/blog/417608

关于页面元素在父容器里水平居中、垂直居中的问题相关推荐

php退出页面父元素,jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码...
iframe和弹窗这些词对于js高手来说都是耳熟能详的东西,作为一个新人来说,还在学习阶段的我就在工作中遇到这么一个奇葩的需求,要在引入的iframe页面里做一个全屏化的功能. 粗略一看,这还不容易, ...
[css] 写出固定子容器在固定的父容器下水平垂直居中的布局
[css] 写出固定子容器在固定的父容器下水平垂直居中的布 1.父容器 position: relative,子元素 position: absolute;left: 50%;top: 50%;tra ...
iframe子页面获取父页面元素,或父页面获取iframe子页面的元素
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! js 在父窗口中获取iframe中的元素格式:window.frames["iframe的n ...
web前端技术分享之页面元素水平居中
小伙伴们每次在写网页时会经常遇到需要将元素垂直或水平居中的时候,往往面临着方法的选择,而各种方法有的简单,有的困难,还有的有一些坑,在选择方法时我们应该怎么做才能不走弯路呢? 话不多说,现在就来分享我 ...
[译] 关于CSS中的float和position (父容器div内的子元素div为float时，父元素无法撑开（或高度自适应）的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
父、子页面之间页面元素的获取，方法的调用
一.在iframe页面上调取父级页面元素 1.在父页面上获取iframe页面元素(在父页面修改子页面div的背景色为红色) js代码如下: 1 <script type="t ...
Android仿人人客户端（v5.7.1）——采用RelativeLayout做父容器，实现左侧滑动菜单（一）...
转载请标明出处:http://blog.csdn.net/android_ls/article/details/8756059 一.滑动效果的实现原理: 1.采用RelativeLayout作为父容器 ...
如何获取元素在父级div里的位置_关于元素的浮动你了解多少
首先,在介绍什么是浮动之前我们先介绍一下html中元素的普通流布局方式.在普通流中,元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的,在排列过程中所有的行内元素水平排列,直到当行被占 ...
若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
前言因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...

关于页面元素在父容器里水平居中、垂直居中的问题

关于页面元素在父容器里水平居中、垂直居中的问题相关推荐

最新文章

热门文章