HTML/CSS：フローティングされた要素の横にある余白を追加できません。

Question

浮動画像とその段落を持つようにしています。しかし、私は段落を真ん中で開始したいので、基本的には整列しません。だから私は私のスパンにマージントップを入れたいが、それをやり遂げなかった。 http://codepen.io/pango143/pen/LWJpmL

Answer 1

あなたは行の高さプロパティでそれを修正することができます。

span要素

line-height: 110px; 

OR

に次のCSSコードを追加し表示を設定します。テーブルと、と親要素とdisplay：table-cell;縦線：中央;を子要素に追加します。あなたの画像に影が含まれていて、画像が実際にはそれよりも早く終了すると目が見えるようになった場合、マージントップのプロパティで下に移動できます。

はここにあなたのCSSです：あなたはblock label element

span { 
    display: inline-block; 
    margin-top: 25px; 
} 

Answer 2

だけの要素に表示インラインブロックを追加します：

<div class="container"> 
 

 
    <article> 
 
    
 
    <section> 
 
     
 
     <p> 
 
      <img style="float:left;" src="https://www.w3schools.com/images/w3schools_green.jpg" /> 
 
     <span style="margin-top: 45px; display:inline-block;">Hello World! My name is James polar Good morning</span> 
 
     </p> 
 
     
 
    </section> 
 
    
 
    </article> 
 

 

 
</div>

私のコード

<div class="container"> 
 
    <article> 
 
    <section> 
 
     <p> 
 
     <img style="float:left;" src="https://www.w3schools.com/images/w3schools_green.jpg" /> 
 
     <span style="margin-top: 25px;">Hello World! My name is James polar Good morning</span> 
 
     </p> 
 
    </section> 
 
    </article> 
 
</div>

codepenため

例えばあなたはdiplay-インラインおよび垂直整列でこれを行うことができます

Answer 3

：あなたの後ろにして、中間

img { 
 
    display: inline-block; 
 
    width: 30%; 
 
    vertical-align: middle; 
 
} 
 
span { 
 
display: inline-block; 
 
    font-size: 16px; 
 
    margin-top: -73px; /*ajust */ 
 
    vertical-align: middle; 
 
    width: 70%; 
 
} 
 
p { 
 
    position :relative; 
 
    width: 100%; 
 
    font-size:0; 
 
}

<div class="container"> 
 

 
    <article> 
 
    
 
    <section> 
 
     
 
     <p> 
 
      <img src="https://www.w3schools.com/images/w3schools_green.jpg" /> 
 
     <span>Hello World! My name is James polar Good morning</span> 
 
     </p> 
 
     
 
    </section> 
 
    
 
    </article> 
 

 

 
</div>

Answer 4

このような何かを意味ですか？

<div class="container"> 
 

 
    <article> 
 

 
<section> 
 
    
 
    <div> 
 
     <img style="position: absolute;" src="https://www.w3schools.com/images/w3schools_green.jpg" /> 
 
    <p style="padding-top: 40px;">Hello World! My name is James polar Good morning</p> 
 
    </div> 
 
    
 
</section> 
 
    
 
    </article> 
 

 

 
</div>

Answer 5

試してみてください。

<div class="main-container"> 
    <article> 
    <section> 
     <div class="container" style="position: relative;"> 
     <img style="" src="https://www.w3schools.com/images/w3schools_green.jpg"> 
     <span style="position: absolute; padding-left: 13px; top: 50%;">Hello World! My name is James polar Good morning</span> 
     </div> 
    </section> 
    </article> 
</div> 

Answer 6

にあなたのspanタグを変換する必要があり、このために

section p { 
    display: table; 
} 

section p span { 
    display: table-cell; 
    vertical-align: middle; 
} 

section p img { 
    margin-top: 25px; 
}