SVGが中心にならない

Question

私は自分のロゴを<div>タグの中に入れる方法を見つけようと必死に努力してきました。私はスタックオーバーフローのように感じたものを精査したが、役に立たなかった。私は誰かが願っています...誰もがこれで私を助けることができます！

.site-nav__list { 
 
     display: flex; 
 
     list-style: none; 
 
     align-items: center; 
 
     padding: 0; 
 
     margin: 0; 
 
    } 
 
    .nav-logo { 
 
     cursor: pointer; 
 
     text-align: center; 
 
     width: 3.7em; 
 
     height: 3.7em; 
 
     border: 1px solid red; 
 
    } 
 
    .nav-logo svg { 
 
     display: block; 
 
     width: 100%; 
 
     height: 100%; 
 
     border: 1px solid green; 
 
    } 
 
    .nav-logo svg g { 
 
     border: 1px solid blue; 
 
    }

<ul class="site-nav__list"> 
 
      <li> 
 
      <div class="nav-logo"> 
 
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
       <g data-name="Layer 1"> 
 
        <path d="M26.25 0v27.1H0a26.67 26.67 0 0 0 53.34 0V0H26.25z" /> 
 
        <path d="M100 8.25a26.67 26.67 0 1 0-.41 37.3L81.14 27.11z" /> 
 
       </g> 
 
       </svg> 
 
      </div> 
 
      </li> 
 
     </ul>

私が働いていないことがわかりましたすべてのソリューション：：/ とはなし、テーブルのセルと絶対位置決めが簡単なSVGの愚かです はここに私のコードです。

Answer 1

あなたはこの問題を解決するために行う必要がありますいくつかの変更があります。

1. はSVGがline-heightのようなものがそれに影響を与えますのでinline-blockに変更し、いくつかの動きを防ぐことができますdisplay:blockを持っています。
2. height（3.7em）と同じサイズのline-height〜.nav-logoを追加すると、要素は中央に垂直に表示されます。
3. vertical-align: middleを追加して、イメージをラインの真ん中に垂直に整列させます。

4. width:100%とheight:100%を削除すると、SVGのサイズを指定しないので、自動的にコンテナのサイズに拡大されます。

   これらの変更を加えても、画像はすでに中央に配置されていますが、そのようには見えません。どうして？ 1つの変更が残っているため、viewBoxです。現在、SVGは2文字で、下に大きな空白があります。これは、画像が描かれているキャンバスのviewBoxが100x100ですが、画像の「最も小さい」点が53.34にあり、その下のすべての空白が空白になっているためです。
   
   

5. だから、最後の変更：それは内部のコンテンツに画像を制限してビューボックスを変更：幅（100）okですが、高さは53.34でなければなりません。その最後の部分を固定した後、ロゴセンター縦：

.site-nav__list { 
 
    display: flex; 
 
    list-style: none; 
 
    align-items: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.nav-logo { 
 
    cursor: pointer; 
 
    text-align: center; 
 
    width: 3.7em; 
 
    height: 3.7em; 
 
    border: 1px solid red; 
 
    line-height: 3.7em; 
 
} 
 

 
.nav-logo svg { 
 
    display: inline-block; 
 
    border: 1px solid green; 
 
    vertical-align:middle; 
 
} 
 

 
.nav-logo svg g { 
 
    border: 1px solid blue; 
 
}

<ul class="site-nav__list"> 
 
    <li> 
 
    <div class="nav-logo"> 
 
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 53.34" preserveAspectRatio="none"> 
 
     <g data-name="Layer 1"> 
 
      <path d="M26.25 0v27.1H0a26.67 26.67 0 0 0 53.34 0V0H26.25z" /> 
 
      <path d="M100 8.25a26.67 26.67 0 1 0-.41 37.3L81.14 27.11z" /> 
 
     </g> 
 
     </svg> 
 
    </div> 
 
    </li> 
 
</ul>

---

あなたは最小限の変更を制限する場合は、あなただけの1つの簡単なステップ必要になります翻訳しますgタグをsvgの範囲内に配置する必要があります。そのため、下にすべての空白を残すのではなく、文字の上と下に置きます。

あなたが垂直方向にそれを翻訳する必要があります（100 - 文字の高さ）/ 2、以前に述べとして、高さは53.34であるので、翻訳は23.33である必要がある：

.site-nav__list { 
 
    display: flex; 
 
    list-style: none; 
 
    align-items: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.nav-logo { 
 
    cursor: pointer; 
 
    text-align: center; 
 
    width: 3.7em; 
 
    height: 3.7em; 
 
    border: 1px solid red; 
 
} 
 

 
.nav-logo svg { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid green; 
 
} 
 

 
.nav-logo svg g { 
 
    border: 1px solid blue; 
 
}

<ul class="site-nav__list"> 
 
    <li> 
 
    <div class="nav-logo"> 
 
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"> 
 
      <g data-name="Layer 1" transform="translate(0, 23.33)"> 
 
      <path d="M26.25 0v27.1H0a26.67 26.67 0 0 0 53.34 0V0H26.25z" /> 
 
      <path d="M100 8.25a26.67 26.67 0 1 0-.41 37.3L81.14 27.11z" /> 
 
      </g> 
 
     </svg> 
 
    </div> 
 
    </li> 
 
</ul>