一、行高(line-height)法如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落
一、flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相反) ※ flex-direction:column (从上往下排列==顶对齐) ※ flex-direction:column-reverse (与column 相反) 二、flex-wrap: (内容一行容不下的时候才有效) ※ flex-wrap:no...
※ flex-direction:column-reverse (与column 相反) image 二、flex-wrap: (内容一行容不下的时候才有效) ※ flex-wrap:***nowrap (超出不换行,很奇怪里面的宽度会变成100%) image ※ flex-wrap:wrap (超出按父级的高度平分) image ※ flex-wrap:wrap-reverse(与wrap 相反) image 三、***justify-content...
方法一:给父元素加上如上代码 display:flex; //弹性布局 justify-content:center; //子元素相对父元素水平(主轴)居中 align-items:center; //子元素相对父元素垂直(交叉轴)居中 不足之处:父容器里的所有子元素们都垂直居中了。(如果父容器里有多个子元素的话,我们只想指定某个子元素居中,则可以用方法二。 ...
方案2(设置为flex布局): <!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><divstyle="background: pink; width: 500px;heig...
<div> <img src="avatar.jpg"> </div> 效果图: marginauto.png 方法二:flex弹性盒子法 利用flex,align-items:center是控制垂直方向居中,justify-content:center是控制水平方向的居中。 CSS代码: div{ width: 600px; height: 600px; display: flex; ...
<div class="box"> <span class="item">垂直居中 -- 内联元素 display:inline</span> </div> </body> </html> 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 方案二:flex布局【推荐】 ...
<div class="div1"> <div class="box">水平垂直居中,不需要子元素固定宽高</div> </div> </body> 公共css如下 .div1{ width: 300px; height: 300px; border: 1px solid red; } .box{ background: #00FFFF; } 四、flex(常用) flex是现代的布局方案仅仅需要几行代码即可实现居中效果 ...
如果 CSS 支持‘flex’的话，那同时垂直、水平居中就更简单了：CSS 样式：div.container6 { height: 10em; display: flex; align-items: center; justify-content: center }div.container6 p { margin: 0 } 相比之前，只增加了‘justify-content: center’。就像‘align-items’决定了 container 里面...