再談垂直居中

問題描述

  • 一段html代碼是這樣
<main className="main">
    <h3 className="head">垂直居中</h3>
    <p className="p"><span>如何做到當然是非常難的</span></p>
    <div className="div">xxxxxxxx</div>
</main>
.main{
  margin: 0;
  line-height: 1;
  font-size: 16px;
  background-color: antiquewhite;
}

.head{
  vertical-align: middle;
  margin: 0;
  font-size: 30px;
  display: inline-block;
}

.p{
  height: 22px;
  vertical-align: middle;
  margin: 0;
  background-color:red;
  display: inline-block;
}


.div{
  vertical-align: middle;
  margin: 0;
  font-size:15px;
  display: inline-block;
}
image.png
  • 接著我希望他們都能是垂直居中的
  • 根據(jù)剛剛了解vertical-align想要讓一個塊元素中的所有inline-block悴了,垂直居中,只要給塊元素設(shè)置一個行高攘烛,借助vertical-align對inline-block有效的特點,直接給每個子元素設(shè)置vertical-align:middle
  • 但是卻是這個樣子的


    image.png
  • 為什么呢镀首?

問題解答

  • Q1:為什么會出現(xiàn)如圖效果坟漱?
  • A1:首先設(shè)置了父元素的line-height:2,并將所有的inline-block子元素都設(shè)置了vertical-align:middle。
    • vertical-align:middle:讓元素的中垂點與 父元素的基線加1/2父元素中字母x的高度 對齊更哄。很抽象靖秩,但是看起來所有的(inline-block)子元素的中垂點好像是在父元素的中線上

  • Q2:那么為什么紅色背景的子元素會出現(xiàn)這種效果呢?
  • A2:因為vertical-align只對作用的inline或者inline-block元素有效竖瘾,因此對其子元素span沒有任何作用沟突,其子元素span的vertical-align仍然是baseline

  • Q3:那么如何處理紅色背景子元素中的字呢?
  • A3:首先先確定紅色框中的子元素是span是一個inline元素捕传,讓這個inline元素垂直居中即可,因此首先需要給紅框設(shè)置行高惠拭,
    • 如果想要紅框中的字垂直居中,那么需要給紅框設(shè)置行高庸论,可以給紅框設(shè)置行高和本身div高度一致职辅,這樣中線就大概在div中央了
    • 然后設(shè)置span vertical-align:middle

這篇只是談如何解決我手頭的垂直居中問題,再遇到垂直居中的難題聂示,一定還會再好好研究

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末域携,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子鱼喉,更是在濱河造成了極大的恐慌秀鞭,老刑警劉巖趋观,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異锋边,居然都是意外死亡皱坛,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門豆巨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來剩辟,“玉大人,你說我怎么就攤上這事往扔》妨裕” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵萍膛,是天一觀的道長融欧。 經(jīng)常有香客問我,道長卦羡,這世上最難降的妖魔是什么噪馏? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮绿饵,結(jié)果婚禮上欠肾,老公的妹妹穿的比我還像新娘。我一直安慰自己拟赊,他們只是感情好刺桃,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著吸祟,像睡著了一般瑟慈。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上屋匕,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天葛碧,我揣著相機與錄音,去河邊找鬼过吻。 笑死进泼,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的纤虽。 我是一名探鬼主播乳绕,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼逼纸!你這毒婦竟也來了洋措?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤杰刽,失蹤者是張志新(化名)和其女友劉穎菠发,沒想到半個月后王滤,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡雷酪,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了涝婉。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片哥力。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖墩弯,靈堂內(nèi)的尸體忽然破棺而出吩跋,到底是詐尸還是另有隱情,我是刑警寧澤渔工,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布锌钮,位于F島的核電站,受9級特大地震影響引矩,放射性物質(zhì)發(fā)生泄漏梁丘。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一旺韭、第九天 我趴在偏房一處隱蔽的房頂上張望氛谜。 院中可真熱鬧,春花似錦区端、人聲如沸值漫。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽杨何。三九已至,卻和暖如春沥邻,著一層夾襖步出監(jiān)牢的瞬間危虱,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工唐全, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留槽地,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓芦瘾,卻偏偏與公主長得像捌蚊,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子近弟,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案缅糟? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 13,761評論 1 92
  • 收聽音頻,戳鏈接,舊號itclan已暫停使用,歡迎關(guān)注微信itclanCoder公眾號可收聽更多音頻 前言 關(guān)于網(wǎng)...
    itclanCoder閱讀 8,191評論 3 30
  • 在頁面布局中,居中在各種各樣的場景中廣泛被用到祷愉,也經(jīng)常被新人提及窗宦。以前做過一些自己探索居中問題的demo赦颇,今天翻出...
    彬_仔閱讀 324評論 0 6
  • 介紹一下行內(nèi)元素和塊級元素,這個很重要赴涵,因為有的屬性只能用于塊元素媒怯,而有的正好相反,在一定的情況下髓窜,它們也可以相互...
    吧啦啦小湯圓閱讀 724評論 0 3
  • 本文主要是起筆記的作用扇苞,內(nèi)容來自慕課網(wǎng). 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,652評論 0 30