1. vertical-align屬性實現效果:
vertical-align 屬性設定元素的垂直對齊方式。
該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。
<div
class
="header"
>
<
span
class
="line"
>
span
>
<
span
class
="text"
>中間文字,兩邊橫線
2. css偽類實現效果:
中間文字,兩邊橫線div>中間文字,兩邊橫線(純css實現的哦)
最近在做專案的時候,遇到了乙個中間文字,兩邊橫線的布局,如下圖 第一種 如下 到底了 這裡使用了背景色和透明度,細心的人可能會發現,body設定的背景色剛好是 到底了 的文字的背景色,同時也用了行內塊 透明度以及相對定位來實現了的噢。第二種 後來,在網上找到了不同的方法,如下 產品清單 在css樣式...
中間文字,兩邊橫線的css3偽元素的使用
先介紹下偽類和偽元素 偽類 操作的是在dom結構中已經存在的元素,可以對它進行一些樣式的調整,比如 active,hover等,一般用單冒號,感覺像是給元素新增乙個class,然後設定樣式 偽元素 操作的是在dom結構中不存在的元素,比如 after,before等,可以對新新增的元素設定樣式等,一...
css實現兩邊固定,中間自適應
經常有需求,所以就總結一下,有需要的時候直接複製貼上啦 布局的原理是margin負值法。首先需要在center元素外部包含乙個div,包含div需要設定float屬性使其形成乙個bfc,並設定寬度,並且這個寬度要和left塊的margin負值進行配合,具體原理參考這裡。這裡對聖杯布局解釋特別詳細。h...