鍍金池/ 問(wèn)答/網(wǎng)絡(luò)安全  HTML/ 一個(gè)元素的行高影響了旁邊元素的位置

一個(gè)元素的行高影響了旁邊元素的位置

<li>設(shè)置了高度和相同的行高，里面的<div>(圓點(diǎn))設(shè)置成display:inline-block;使其垂直居中。圓點(diǎn)右邊是<span>標(biāo)簽里的文字。<span>設(shè)置成display:inline-block;然后給了寬度。因?yàn)槲淖痔嘁獡Q行，所以給<span>設(shè)置了行高，是<li>高度的一半。但是設(shè)置之后卻影響了左邊圓點(diǎn)的垂直居中，使圓點(diǎn)下移了。請(qǐng)問(wèn)這是為什么？
clipboard.png

如果<span>的行高設(shè)置成50%，圓點(diǎn)是正常垂直據(jù)居中了，但換行的文字就擠在一起了。發(fā)現(xiàn)此時(shí)50%的行高是相對(duì)字體大小而言的。字體大小是16px，所以這里行高就變成了8px了。為什么是這樣？
clipboard.png

怎么樣在使用行高的方法垂直居中的情況下讓<li>里的文字即使換行也是正常居中？

回答
編輯回答
未命名

div(圓點(diǎn)) > line-height = 父元素行高 ; verticle-align:top;

2017年11月16日 09:01
編輯回答
舊時(shí)光

怎么樣在使用行高的方法垂直居中的情況下讓<li>里的文字即使換行也是正常居中？
問(wèn)題太長(zhǎng)。。我只看到最后的重點(diǎn)..

line-height or
position or
浮動(dòng) 左右布局

2017年12月20日 04:47
編輯回答
安淺陌

這個(gè)問(wèn)題其實(shí)很好解決呀,div.dot span 都要了，冗余用不著的
設(shè)置 li 的padding-left
讓 li:before 作為小圓點(diǎn)，絕對(duì)定位與左側(cè)，垂直居中

html:
<ul>
    <li>標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題標(biāo)題</li>
</ul>
css:
li {
    padding-left: 0.8rem;
    position:relative;
}
li:before {
    content:'';
    display:inline-block;
    width:0.2666rem;
    height:0.2666rem;
    position:absolute;
    left:0.2666rem;
    top:50%;
    margin-top:-0.1333rem;
    border-radius:50%;
    background: green;
}
2017年1月13日 23:52
編輯回答
撿肥皂
li {
    display: flex;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
}
2018年7月5日 01:25