文本鏈接的內部對齊錯誤在WordPress但在HTML

正如你可以在圖片看到，該文本「英語」是不是垂直的網站我的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>

SASS

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

來源

2017-07-18 Casey

仔細檢查瀏覽器中呈現的最終CSS，看看是否所有CSS條目都設置正確。 – Raptor

我使用檢查檢查了這兩個元素，但我找不到任何不同的東西 – Casey

您能鏈接到您的網站嗎？ –

SCSS

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

這可能會幫助你。

來源

2017-07-18 03:08:52

謝謝！那樣做了！我從來沒有遇到過垂直對齊的實際使用，所以這是額外的幫助！有點好奇，爲什麼我現在需要PHP文件而不是HTML文件。 – Casey

文本鏈接的內部對齊錯誤在WordPress但在HTML

回答

相關問題