HTML/CSS - 高さが<br>タグに影響していますか？

Question

だから私はこのような何かやりたい：

（私は練習のためにアマゾンを複製しようとしている）

をしかし、私はでありはるかに短く、より良い方法を、しようとしたときディスプレイをインラインブロックに変更します。次にそれを中心にするために、私はline-heightをheightに似せるでしょう。

しかし、これは1つの問題を抱えています。「カテゴリ」の単語もプッシュダウンされています。だから、それは次のようになります。

は、これは私がそれを修正する方法のコード、ありますか？

HTML：

<ul> 
    <li> <a class="nav-text" href="file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Shop by <br/> category </a> 
    </li> 
</ul> 

CSS：

.nav-text { 
    display: inline-block; 
    height: 100px; 
    padding: 0 20px; 
    line-height: 100px; 
    text-decoration:none; 
    font-size: 23px; 
    font-family: "Times New Roman", Times, serif; 
    color: white; 
    font-weight: 700; 
    margin-right: 30px; 
} 

Answer 1

あなたは全くaのための表示を変更する必要はありません。 aは持っている必要があります。

{ vertical-align:middle; } 

それのためのセットと、高さと、すべての残りの部分はli、ないaのルールに設定する必要があります。実際、他のCSSプロパティのいくつかも同様に出てくる可能性があります。

それが今a要素（もう少し意味的に正しい）の親であるように、私はまた、あなたがa要素内にネストされていたp要素を移動するためにバイオリンを更新しました。

https://jsfiddle.net/3Lsm4prg/4/

Answer 2

あなたが<br/>タグを使用しているので、あなたがbasicly大きなスペースを起こし100pxにの行の高さの両方で2つのラインを持っています。 <p>タグでテキストをラップしてdisplay: table;とvertical-align: middle;という文字列で囲んだ場合このコードでは、line-heightを使用する必要はありません。更新されたコードのための私のバイオリンを参照してください：

https://jsfiddle.net/yjjmjya0/

.nav-text { 
    display: inline-block; 
    height: 100px; 
    padding: 0 20px; 
    vertical-align: middle; 
    text-decoration:none; 
    font-size: 23px; 
    font-family: "Times New Roman", Times, serif; 
    color: white; 
    font-weight: 700; 
    margin-right: 30px; 
} 

.nav-text p { 
    display: table; 
    vertical-align: middle; 
    height: 100%; 
} 

<ul> 
    <li> 
    <a class = "nav-text" href=file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> 
     <p> 
     Shop by <br/> category 
     </p> 
    </a> 
    </li> 
</ul> 

Answer 3

問題はline-heightが各行の行の高さを設定していることです。代わりにnav-textクラスでvertical-align:bottomを使用してください。

.nav-text { 
 
    display: inline-block; 
 
    padding: 0 20px; 
 
    text-decoration:none; 
 
    vertical-align:bottom; 
 
    font-size: 23px; 
 
    font-family: "Times New Roman", Times, serif; 
 
    font-weight: 700; 
 
    color:white; 
 
    margin-right: 30px; 
 
} 
 
li{ 
 
    list-style: none; 
 
    display:inline-block; 
 
} 
 
ul{ 
 
    padding:0; 
 
    background:rgb(35,47,62); 
 
}

<ul> 
 
      <li> <a class = "nav-text" href = "file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Shop by <br/> category </a> </li> 
 
    <li> <a class = "nav-text" href = "file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Discussion Forums </a> </li> 
 
    <li> <a class = "nav-text" href = "file:///C:/Users/Owner/AppData/Roaming/Sublime%20Text%203/Packages/User/practice1.html"> Help </a> </li> 
 
</ul>