厉害了我的哥,css图片居中原来有这么多种方法.pdf

厉害了我的哥,css图⽚居中原来有这么多种⽅法 图⽚的居中显⽰css有很多⽅法，但在很多情况下有的⽅法⽆效，这是件很头疼的事 情，⽐如⼀般设 图⽚属性text-align:centre⽔平居中，但这个⽅法经常⽆效，很多前 端攻程师都有研究过或者说是有哪些信誉好的足球投注网站过css图⽚居中⽅法吧。 但其实css图⽚居中有多种不同的情况，也有多种不同的解决⽅法，具体⽅法如下所 ⽰： 图⽚居中又分为⽔平居中和垂直居中 ⼀、⽔平居中： 1、单独⽂字垂直居中我们只需要设 CSS样式line-height属性即可。 2、⽂字与图⽚同排，在设 div⾼度同时再对此css样式的图⽚“img”样式设 vertical- align:middle垂直居中属性，如.yangshi img{vertical-align:middle;} 。 3 不确定宽度的块级元素设 ⽔平居中的⽅法 （1）、是使⽤table作为容器的⽅法来实现。当然不⼤推荐使⽤这种⽅法，因为添加 了⽆意义的标签。这⾥就稍微介绍⼀下吧。 able标签本⾝并不是块级元素，当我们不 设 table的宽度的话，他⾥⾯的宽度是由他内部元素的宽度撑起来的。但即使我们没 有设 table的宽度，直接设 table的外边距margin ：0 auto;就可以实现⽔平居中了!这 样我们就可以通过设 table⽔平居中，间接使⾥⾯的内容居中。 　　 （2 ）、相对于⽤table的⽅法的好处是不⽤增加⽆语义标签，简化标签嵌套深度。这 个思路是这样的，通过改变块级元素的display属性值为inline类型，然后设 text- align:center来实现居中。这种⽅法也有⼀定不妥之处就是把块级元素改为⾏内元素 后，⾏内元素⽐块元素少了⼀些功能。⽐如说设定长宽值等，在项⽬运⽤中可能会有 ⼀些限制，⼤家可以⾃⾏选择。 　　 （3 ）、通过给⽗元素设 浮动float ，再设 ⽗元素的position属性为relative和left ： 50%;⼦元素设 position ：relative和left ：-50%来实现⽔平居中。这个好处是可以保留 块级元素仍然是以display ：block 的形式显⽰，不会添加⽆意义的标签，不添加嵌套深 度。确点是设 了position ：relative;带来了⼀些副作⽤。下⾯是第三种⽅法的实例代 码，放到body标签⾥⾯就可以了。 ⼆、垂直居中： 对这个CSS居中问题 我们可以使⽤设置背景图⽚的⽅法。举例： body {BACKGROUND: url(”图⽚⽂件”) #FFF no-repeat center;} 关键就在于这个Center属性，它表⽰让该背景图⽚在容器中居中。你也可以把Cener换 成 op Left或者直接写上数字来调整它的位 。 ⽅法⼀: style type=text/css !-- * {margin:0;padding:0} div { widt :500px; eig t:500px; border:1px solid #666; overflow : idden; position:relative; display :table-cell; text-align:center; vertical-align:middle } div p { position:static; +position:absolute; top:50% } img { position:static; +position:relative; top:-50% ;left:-50% ; } -- /style divpimg src= ttp://www ./intl/en/images/logo.gif ⽅法⼆: !DOCTYPE tml PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN ttp:// tml xmlns= ttp://www ./1999/x tml ead meta ttp-equiv=Content-Type content=text/ tml; c arset=utf-8 titlediv⾥⾯图⽚垂直居中的⼏个例⼦/title style type=text/css !-- body { margin:0;padding:0 } div { widt :500px; eig