css實現中間文字,兩邊橫線效果

2022-07-24 06:57:11 字數 1030 閱讀 9683

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...