web-dev-qa-db-ja.com

CSSのSVGの垂直方向の配置

インラインSVGアライメントに問題があります。テキストとSVGを含むボタンを作成しました。また、SVGがテキストと少なくとも同じ大きさの場合、位置合わせは正しく機能しますが、SVGの高さがテキストよりも小さい場合、位置合わせは失敗します。

私は、真ん中がどこにあるかを示すために、2色の背景ボタンを持つテストケースを作成しました。 SVGの高さがテキストの高さよりも低いため、2番目のケースが完全に揃っていないことをよく見るとわかります。

これを修正する方法はありますか？それを他の方法で行います（jsはお控えください）？

テストケース： https://goo.gl/KYDKGH

htmlcsssvgalignmentvertical-alignment
13
MyWetSocks

jsfiddle 1 -コンテナではposition:relativeを使用でき、このようなオブジェクトではposition:absoluteを使用できます：

  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;

top: 50%は、オブジェクトをコンテナの垂直中心に移動し、オブジェクトの上部を参照として（その中心ではなく）選択するため、transform: translateYは、オブジェクトのサイズの50％の距離だけ正確に移動します。コンテナの中央（オブジェクトの中心）。

ps：text-align:center;left:0;right:0;およびmargin:autoは水平方向に整列します。

jsfiddle 2 -または、display:flexを含むコンテナでalign-itemsを使用して、コンテンツをこの：

  display: -webkit-flex; /* Safari */  
  display: flex;
  -webkit-align-items: center; /* Safari 7.0+ */
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;

ps：justify contentは水平方向の整列用です。

28
Le____