元素居中大合集_资讯

创始人

2024-01-23 08:04:15

0次

关于居中这个话题一直是面试官最喜欢问的问题，今天呢我就给大家总结一下关于文本、图片与盒子的一系列居中问题。
一、文本居中
1、文本水平居中
给装文本的盒子添加text-align:center;

文本

以上方法适用于所有内联元素的水平居中
2、单行文本垂直居中
给装文本的盒子设置行高等于高度

文本

3、多行文本垂直居中
想实现多行文本垂直居中需要对元素本身的类型进行转换

文本

二、图片居中
1、图片水平居中
因为图片属于内联-块元素，所以text-align:center;在他这里也是适用的

2、图片垂直居中
实现图片垂直居中我总结了两个方法：
1）利用行高等于高度的原理

2）利用中线参照物的原理

方法二中，如果前面样式重置的时候你把图片转成块级元素了，那么你还需要再给转回来（display:inline-block）,参照物span也可以使用css3里面的伪元素替代：

三、块级元素居中
1、定位居中方法
1) 知道子盒子尺寸的情况下可以使用

2) 知道子盒子尺寸的情况下利用css3里面的calc函数也可以实现

3) 不知道子盒子尺寸的情况下可以使用

4) 不知道子盒子尺寸的情况下利用css3里面的位移可以实现

2、弹性盒居中方法
1)

3、inline-block居中方法
其实inline-block元素的居中等同于图片的居中，如果你需要让一个inline-block居中，那么图片的居中方法都适用。
1）行高等于高度居中方法

2）参照物中线对齐方法

3）等同多行文本居中方法

上一篇：单词板是什么

官高爵显的近义词官高爵显的近义词有：高官显爵，官高爵显[guān gāo jué xiǎn]的意思：爵：爵位，官爵；...

切要关头的近义词切要关头的近义词有：紧要关头，切要关头[qiè yào guān tóu]的意思：关头：关口。比喻有...

面面俱到,面面俱到的意思,面... 面面俱到miàn　miàn　jù　dào [释义]俱：都。各方面都照顾到。也指虽然各方面都照顾...

人单势孤的近义词人单势孤的近义词有：势单力薄，人单势孤[rén dān shì gū]的意思：人数少，力量单薄。出自...

间断的近义词　　一、【近义词】　　中断、中止、拆开、休止　　二、【基本解释】　　[释义](动)(连续的事情)中间...

乡壁虚造的近义词乡壁虚造的近义词有：凭空捏造，无中生有，面壁虚构，乡壁虚造[xiāng bì xū zào]的意思：...

盎盂相敲的近义词盎盂相敲的近义词有：盎盂相击，盎盂相敲[àng yú xiāng qiāo]的意思：比喻一家人争吵。...

高枕而卧的近义词高枕而卧的近义词有：无忧无虑，高枕安卧，高枕安寝，高枕无忧，高枕而卧[gāo zhěn ér wò]...

破题儿第一遭的近义词破题儿第一遭的近义词有：破题儿，破题儿头一遭，破题儿第一遭[pò tí ér dì yī zāo]的...

如堕烟海的近义词如堕烟海的近义词有：如坐云雾，如堕烟雾，雾里看花，如堕烟海[rú duò yān hǎi]的意思：好...

雁杳鱼沉的近义词雁杳鱼沉的近义词有：信断音绝，雁断鱼沉，雁逝鱼沉，雁杳鱼沉[yàn yǎo yú chén]的意思：...

汪洋大海的近义词汪洋大海的近义词有：东洋大海，声势浩大，波澜壮阔，汪洋大海[wāng yáng dà hǎi]的意思...

明效大验的近义词明效大验的近义词有：明验大效，明效大验[míng xiào dà yà]的意思：显著而又巨大的效验。...

难乎为继的近义词难乎为继的近义词有：难以为继，难乎为继[nán hū wéi jì]的意思：难于继续下去。出自：清 ...

在所难免的近义词在所难免的近义词有：在劫难逃，在所不免，在所无免，在所难免[zài suǒ nán miǎn]的意思...

恨入心髓的近义词恨入心髓的近义词有：恨之入骨，恨之切骨，恨入骨髓，恨入心髓[hèn rù xīn suǐ]的意思：恨...

富翁的近义词富翁的近义词　　近义词：　　大亨、财主　　大亨：大亨 dàhēng[magnate;big wig;...

背本就末的近义词背本就末的近义词有：背本趋末，背本逐末，背本就末[bèi běn jiù mò]的意思：指背离根本，...

问牛知马的近义词问牛知马的近义词有：举一反三，触类旁通，问羊知马，闻一知十，问牛知马[wèn niú zhī mǎ]...

不通文墨的近义词不通文墨的近义词有：不识之无，胸无点墨，不通文墨[bù tōng wén mò]的意思：通：精通；文...