![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
对齐方式
Fade Away
这个作者很懒,什么都没留下…
展开
-
使用外边距设置【块级元素block】元素宽度
对于block元素可以设置外边距相当于间接设置了宽度<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="../css/resetm.css"> <...原创 2019-04-11 15:25:22 · 830 阅读 · 0 评论 -
verticla-align top 为什么能解决图片的对齐问题
1.图片是inline-block元素,有inline元素特性2.inline元素默认基线对齐3.把图片看成一个可以设置宽高的文本4.文本和当前line-box的基线对齐5.盒子的基线是margin-bottom6.对齐之后发现文本会在line-box的margin-bottom下面一些,所以出现了文本下沉的问题7.让文本盒line-box top对齐,文本就不会撑开line-box了...原创 2019-07-06 23:52:45 · 209 阅读 · 0 评论 -
居中另类实现
块级元素自动撑满整行 需要给定高度原创 2019-07-09 23:22:05 · 240 阅读 · 0 评论 -
搜索栏布局方式[二]
原创 2019-04-20 10:50:14 · 537 阅读 · 0 评论 -
CSS居中实现【二】
对于普通块级元素,margin-auto只能实现水平居中,为何不能在垂直方向居中呢???很奇怪查了一下, 对于普通块级元素,margin设为auto,意味着margin-top、margin-bottom的值都会被设为0,只能实现左右居中对于定位了的块级元素,margin:auto可以实现什么呢?顶到左上角再看一下设置 lbtr四个属性会怎么样先给top0 bottom0垂直居中...原创 2019-03-11 12:02:11 · 207 阅读 · 0 评论 -
位置宽高---居中【总结】
1.图片居中显示father-box:text-center + line-height + font-size 0img:vertical-align-middle//解释:2.弹性盒子align-items: center;justify-content: center;3.定位3.1 lbtr0 ma wh3.2 translate(-50%,-50%)4.图片居...原创 2019-03-15 15:22:04 · 179 阅读 · 0 评论 -
CSS居中实现【一】
CSS居中实现 ## 1不使用定位实现居中 ## 1.1行内块级元素的居中【水平方向】 对行内块级元素的父元素添加text-align:center属性 因为inline-block带有inline属性,可以实现居中&amp;lt;style type=&quot;text/css&quot;&amp;gt; div{ display: 400px; height: 400px; b原创 2019-03-08 21:24:52 · 100 阅读 · 0 评论 -
常见的几种居中方式
1.单行文本的居中text-align:center line-height = 容器高度2.父容器包含单个行内块级元素父元素 text-align: center; line-height: 160px; font-size: 0;子元素 vertical-align: middle; //与父元素对齐值描述baselin...原创 2019-04-09 11:27:06 · 358 阅读 · 0 评论 -
inline-block元素巨坑
inline-block元素带有文本属性宽高属性,但是,绝对不是块级元素,在使用inline-block,一旦发现排列问题,第一要想到的是他的文本属性导致的,因为文本有字号和行高,会改变这一行的基线位置解决办法:font-size = 0字号为0,基线和其他的线重合,字体高度为0vertical-align: top;改变对齐方式...原创 2019-04-11 17:44:03 · 385 阅读 · 0 评论 -
tabel cell 是行内元素无法继承父元素宽高
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .outer { width: 500px; height: 500px; background: aqua; ...原创 2019-07-31 19:06:48 · 693 阅读 · 0 评论