HTML画像とテキストの上端と下端を合わせる

私は画像とそれに右に1 2 3 4のようなテキストを表示するために、以下のコードを使用します。私はこのように、HTMLにし、CSSと画像の一部が正常に動作している間、私はテキストが欲しいのですが、画像の上部と下部を埋めるために整列されるように新しいです：HTML画像とテキストの上端と下端を合わせる

同じように、テキストを追加して自動的に整列させると...どこを探しますか？あなたはちょうどあなたが使用しているエディタで画像のtext-aligment属性を変更することができることをやった

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <style></style> 
 
    </head> 
 
    <body> 
 
    <img src = "http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png" />1 2 3 4 
 
    </body> 
 
</html>

出典

2017-05-12 darkchampionz

これは簡単な方法ではありません。 css line-heightやflexボックスでこれを行うことができます。しかし、あなたが学び始めたばかりの方は、それがより高度なレベルにあるので、あなたがそれを待つようにしてくれます。 –

@MosheHarushそれ以外は： – Obsidian

@オブシディアン彼が言ったことによると、 "開始"レベルです。新しいものと高度なものに関連すると考えられるフレックスにまっすぐにすべきかどうかは分かりません。 –

これは完全にスケーラブルであり、関係なく画像がどのようなサイズ動作しません。

#imgWrap, 
 
#imgWrap ul{ 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 
#imgWrap ul{ 
 
    -ms-flex-direction: column; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
    flex-direction: column; 
 
    -webkit-justify-content: space-around; 
 
    -ms-flex-pack: distribute; 
 
    justify-content: space-around; 
 
    list-style:none; 
 
    margin:0; 
 
    padding:0; 
 
}

<div id="imgWrap"> 
 
    <img src = "http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png"> 
 
    <ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    </ul> 
 
</div>

出典

2017-05-12 14:32:00 Obsidian

+1のようなものはありませんが、子供たちに 'flex：1'を削除し、親に' justify-content：space-between'を使用して、 opの画像。 –

@MichaelCokerが承認され、是認されました。 – Obsidian

-1

<!DOCTYPE html> 
<html> 
<head> 
<style> 
</style> 
</head> 
<body> 

<img src = "yourimagesource">1</br>2</br>3</br>4 

</body> 
</html>

。

また、画像の左側に値とアライメントを含む表を作成することもできます。

いくつかのCSSのFlex魔法で

出典

2017-05-12 14:31:51

「text-aligment」や「
」 – Quentin

注意：Flexは、IE9、IE8とIE7に対応していませので、私はそれを使用いけません。

#wrapper { 
 

 
    position: relative; 
 
    overflow: hidden; 
 

 
} 
 

 
#wrapper:after { 
 
    display:block; 
 
    clear:both; 
 
    content:''; 
 
} 
 

 
#Number { 
 

 
    height: 100%; 
 
    position: absolute; 
 
    margin-left: 130px; 
 
    box-sizing:border-box; 
 

 
} 
 

 
.im { 
 

 
    float: left; 
 
\t \t \t 
 
} 
 

 
span { 
 

 
    display: block; 
 
    height: 28%; 
 
      \t 
 
}

<div id="wrapper"> 
 

 
    <img class="im" src = "http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png"> 
 

 
    <div id="Number"> 
 
    <span>1</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    <span>4</span> 
 
</div> 
 

 
</div>

出典

2017-05-12 14:59:22 Ehsan

をするためにあなたが背景に画像を設定することができ、単純な、それを維持し、画像の幅にパディングを行います：

これを試してみてください

#imgHolder{ background-image: url('http://icons.iconarchive.com/icons/uiconstock/christmas-clipart/128/flower-icon.png'); background-repeat: no-repeat; height: 130px; padding-left: 130px; line-height: 32px; }

<div id="imgHolder"> 1 <br/> 2 <br/> 3 <br/> 4 </div>

出典

2017-05-12 15:10:44

HTML画像とテキストの上端と下端を合わせる

答えて

関連する問題