簡體   English   中英

鏈接中的文本在WordPress中無法正確對齊,但在HTML中可以使用

[英]Text inside of link aligns incorrectly in WordPress but is fine in HTML

靜態HTML版本 WordPress版本

正如您在圖像中看到的那樣,文本“英語”不在我正在構建的WordPress版本的垂直居中位置,但是代碼與HTML版本中使用的代碼相同,因此效果很好。 有什么想法嗎?

的HTML

<div class="right-bar">
    <a class="language">
        <img src="img/flags/EN-us.png" alt="English / US">
        <span>English</span>
    </a>
    <a class="search-btn">
        <i class="fa fa-search"></i>
    </a>
</div>

薩斯

.right-bar {
        background: #1f1f1f;
        float: right;
        height: 100%;
        padding: 32px 20px 0;
        position: relative;

        &::after {
            position: absolute;
            top: 0;
            right: 100%;
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 0 98px 83px;
            border-color: transparent transparent #1f1f1f;
        }

        .language {
            border: 1px solid #363636;
            border-radius: 40px;
            color: #898989;
            display: block;
            float: left;
            height: 34px;
            font-size: 10px;
            font-weight: 700;
            line-height: 30px;
            padding: 0 20px;
            position: relative;
            text-transform: uppercase;
            z-index: 99;
        }

        .search-btn {
            float: left;
            display: block;
            margin: 0 0 0 30px;
            color: #fff;
            font-size: 26px;
            font-weight: 400;
            transition: color .2s;

            &:active {
                color:#8eb82f;
            }
        }
    }

SCSS

.language{
  img{
  vertical-align:middle;
  }
}

這可能對您有幫助。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM