同心圆制作 div中的span标签垂直对齐
前段时间要做一个类似的效果链接:
大致结构就是两个同心圆,最内的圆有一串文字,文字水平、垂直都居中。
然后我就开始去做啦,看似很简单,但一开始效果就是做不出来,哭/(ㄒoㄒ)/~~,因为要做自适应,所以定位什么的都没用,后来看了一些资料,感觉以下这个方法算是能在实现效果的基础上代码最简单,也最容易理解了。
代码如下:
做的时候发现了几个问题:
1.同心圆
网上大多做法是写两个div,内部div设置宽高,然后margin:auto。这样做了以后我发现只有水平居中,没有垂直居中。
所以我的做法是两个div,外面的div设定宽高以及padding,内部div设置宽高为100%充满父级div,这样就居中啦。
2.span标签在div中居中
水平居中很容易,在div样式中写text-align即可。问题是垂直居中,第一反应是给span样式中添加vertical-align:middle。
这么想的原因是,w3c中文网上给出的vertical-align解释是这样的:vertical-align 属性设置元素的垂直对齐方式。middle:把此元素放置在父元素的中部。
很简单有木有,然后我就想当然的以为添加了这个样式后,span会放在他的父级div中部,可是做的时候就发现了不行,span根本没有在div居中:
然后我就去找原因啦,发现还有这么一行字:
说明
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
意思是添加该样式的标签里的内容和该标签的垂直对齐方式,也就是说是span的文字和span的对齐方式,而非span和div的对齐方式。那么就可以这么做,将span的line-height设置成div的heigh,然后给span加上vertical-align:middle;那么文字就在span垂直居中了,而span又与div等高,那从效果来看就是span在div中央:
最后,修改下,做出来的效果就是这样啦~
3.回顾下盒子模型,
<div class="outer">
<div class="inner"></div>
</div>