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

Dongjie_Liu 發布于2019-04-23 13:16 / 1200人閱讀

摘要：屬性實現效果屬性設置元素的垂直對齊方式。允許指定負長度值和百分比值。中間文字，兩邊橫線看到網上有把設置為的，試了一下感覺和設置的有沖突效果不太合適。所以將設置到上了偽類實現效果中間文字兩邊橫線

1. vertical-align屬性實現效果：

vertical-align 屬性設置元素的垂直對齊方式。

該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。

<div class="header">
    <span class="line">span>
    <span class="text">中間文字，兩邊橫線span>
    <span class="line">span>
div>

<style>
.header
{
    width:400px;
    height:36px;
    line-height:36px;
    border:1px solid green;
    text-align:center;
}
.line
{
    display:inline-block;
    width:100px;
    border-top:1px solid #cccccc;
    vertical-align:5px;  
　　//看到網上有把.text設置為vertical-align:-5px的，試了一下感覺和.header設置的line-height有沖突,效果不太合適。所以將vertical-align設置到.line上了
}
style>

2. css偽類實現效果：

<div class="header">
    <div>中間文字,兩邊橫線div>
div>


<style>
    .header
    {
        width:400px;
        height:36px;
        line-height: 36px;
        text-align:center;
        border:1px solid green;
        position:relative;
    }
    .header div:before,.header div:after
    {
        position:absolute;
        background:#ccc;
        content:"";
        height:1px;
        top:50%;
        width:100px;
    }
    .header div:before{left:10px;}
    .header div:after{right:10px;}
style>

云服務器 GPU云服務器 html虛線中間文字文字效果 css效果 html文字倒影效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1663.html

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

效果： showImg(https://segmentfault.com/img/bVbleHt?w=1115&h=453); Document .title{ text-align: center; position: relative; height: ...

fevin 2019-08-30 15:54 評論0 收藏0
css實現文字居中兩邊橫線效果

效果： showImg(https://segmentfault.com/img/bVbleHt?w=1115&h=453); Document .title{ text-align: center; position: relative; height: ...

JeOam 2019-08-02 13:55 評論0 收藏0
每周一點canvas動畫——《支付寶價格拖動選擇》

摘要：主要功能就是拖動標尺變動價格。整個標尺的長度為，步長為元。金額顯示首先，增加一個輸入框，然后獲取它。輸入金額移動標尺標尺的移動除了拖動以外，我們也希望通過金額輸入框來達到。效果源碼終于到年底了，再過兩天我也要回家過年了，想想就激動呢！今天給大家帶來一個基于移動端的canvas價格選擇效果。 showImg(https://segmentfault.com/img/bV3QGd?w...

snifes 2019-08-26 11:43 評論0 收藏0
CSS 圣杯布局 / 雙飛翼布局的實現

摘要：先讓它們浮動，并給和一個固定寬度，寬度，清除浮動流，結果變成上面這樣。工作的越久，有些基礎知識我們可能就逐漸淡忘了，今天我們來回顧一下css的圣杯布局和雙飛翼布局，這兩個名詞你可能不熟，那三欄布局你肯定就非常熟悉了，就是兩邊定寬，中間自適應的布局? 1 ，圣杯布局?? 三欄布局 center left right footer 首先HTML結構...

Aldous 2019-04-23 11:40 評論0 收藏0