HTML <span>とsvg要素はインラインではありません

Question

私の現在の状況は、自分のページの別のインラインであるフィールドセットです。 この投稿には、svgサークルとテキストが含まれています。

私の目標は、私は与えられた<span>/<p>テキスト以降のいずれかが真を返す関数に基づいて、上の円の色を変更したいので、フィールドセットのサイズが適応して、お互いにこれらのインラインの両方を持つことですまたはfalse。

私の現在のコードはこれです：イムので、私は、SVG要素をラップ第二のdivが必要な場合でも、わからないこの時点で

<div> 
 
    <fieldset class="fieldset-auto-width"> 
 
    <legend>some legend</legend> 
 
    <div> 
 
     <svg height="32" width="32"><circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/></svg> 
 
    </div> 
 
    <span>some text</span> 
 
    </fieldset> 
 
</div>

JS-Fiddle to my code with CSS

今すぐ半時間ほど手に入れようとしています。私も

style="display: block"で、なぜならそれは取った不要なスペースのSVG要素に最大サイズを強制しようとしたので、ネストされたDIFは今、私は私のSVGサークルと私の<span>インラインをしたいがありました。

<span>代わりの<p>を使用したときのように重要ではないSVG以下あまり不要なスペースがあるので、私は現在<span>なく<p>を使用していた理由です。

編集：間違ったjsfiddleリンク

Answer 1

ここに行きます。 divはブロック要素です。だから、インラインブロックにする必要があります。 vertical-align: middle要素

<div> 
 
\t <fieldset class="fieldset-auto-width" > 
 
\t \t <legend>some legend</legend> 
 
\t \t \t <div style="display: inline-block; vertical-align: middle"> 
 
\t \t \t \t <svg height="32" width="32"> 
 
\t \t \t \t \t <circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/> 
 
\t \t \t \t </svg> 
 
\t \t \t </div> \t 
 
\t \t <span>some text</span> 
 
\t </fieldset> 
 
</div>

Answer 2

<div>はデフォルトでdisplay: blockでの垂直方向の配置を設定します。

divの内容とdivの後の要素をインラインにしたい場合はdivを入れないでください。

<div> 
 
\t <fieldset class="fieldset-auto-width" > 
 
\t \t <legend>some legend</legend> 
 
\t \t \t \t <svg height="32" width="32"> 
 
\t \t \t \t \t <circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/> 
 
\t \t \t \t </svg> 
 
\t \t <span>some text</span> 
 
\t </fieldset> 
 
</div>

Answer 3

ない私は完全にあなたの質問を理解しますが、あなたのspan要素はSVGと同じコンテナ内にない場合に確認してください。インラインブロックを表示するようにSVG要素を設定しているので、これはあなたのスパンには影響しません。両方のあなたの要素の中央（SVGおよびスパン）とディスプレイにあなたのSVGを設定します：インラインブロック

更新フィドル：https://jsfiddle.net/L70oupcp/5/

 <div> 
     <svg height="32" width="32"> 
      <circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/> 
     </svg> 
     <span>some text</span> 
     </div>  

を

あなたは垂直整列を使用することができ、縦にこれら二つを揃えるために、