关于html中 居中 问题小结
2016-05-26 18:01
344 查看
一个DIV在body内居中 适用于登录界面登录小窗口
方法一:
给DIV如下属性:
width:500px;
height:300px;
background:#ccc;
position:absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-150px;
一个DIV在另一个div中垂直居中
方法一:
CSS3中的玩意 这要将这几句加到父div中子DIV就水平垂直居中
[/code]
方法二
html img a标签依次放置
CSS
img{
display:inline-block;
vertical-align:middle;
}
a{
vertical-align:middle;
}
以上文档均来自网上资源 亲测有效。
方法一:
给DIV如下属性:
width:500px;
height:300px;
background:#ccc;
position:absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-150px;
一个DIV在另一个div中垂直居中
方法一:
CSS3中的玩意 这要将这几句加到父div中子DIV就水平垂直居中
justify-content:center;//子元素水平居中 align-items:center;//子元素垂直居中 display:-webkit-flex;
[/code]
方法二
.parent { width:800px; height:500px; border:2px solid #000; position:relative; } .child { width:200px; height:200px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: red; }
方法三
.parent { width:800px; height:500px; border:2px solid #000; display:table-cell; vertical-align:middle; text-align: center; } .child { width:200px; height:200px; display:inline-block; background-color: red; }
方法四
.test{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
图片和a标签水平上居中的解决办法
html img a标签依次放置
CSS
img{
display:inline-block;
vertical-align:middle;
}
a{
vertical-align:middle;
}
以上文档均来自网上资源 亲测有效。
相关文章推荐
- html文本去掉html标签只留文本
- HTML里一些常用设置
- Html 窗口监听,判断键盘状态
- HTML常用符号
- HTML读书笔记(1)
- editplus来编写html
- ht 4000 ml速查标签
- 病毒处理的代码 html病毒
- XML引入以及与html的区别
- XML引入以及与html的区别
- html页面滑动页面加载更多
- HTML特殊符号
- WORD2007转HTML
- [Flex] IFrame系列 —— 嵌入本地页面两种方式source和content(html页面和html代码)
- MarkdownPad 2 在win10下出错:HTML 渲染错误(This view has crashed) 的解决办法 + MarkdownPad2.5 注册码
- 浅析 innerHTML 性能优化的原理
- innerHTML的性能问题
- html 页面太长滚动时,固定页面菜单标签,或者导航标签的位置,fixed/stickUp the position
- html中的换行符也占空间,如何解决
- C#清除HTML标签方法汇总