web-dev-qa-db-ja.com

CSSのテキストに合わせて画像を配置する方法

Htmlとcssを使用して、Webサイトのフッターを作成しています。

2つのFacebookとTwitterの画像をテキストに合わせて、フッターのすべてが互いに一致するようにしたい

現在、私のフッターコードは

HTML-

<div class="footer content">

        <img src="Images/facebook.png">
        <img src="Images/Twitter.png">

        <p> Address line 1
                        Address line 2
                        Address line 3

  </p>

</div> <!--end of footer-->

誰でも助けてくれますか？

htmlcssimagetextfooter
11
user3046451

<p>タグはブロックレベルの要素です。 <span>などのインライン要素を使用します。

<div class="footer content">
    <img src="Images/facebook.png" />
    <img src="Images/Twitter.png">
    <span> 
        Address line 1
        Address line 2
        Address line 3
    </span>
</div>

あるいは、CSSを使用できる場合は、両方の要素をinline-blockとして定義できます。

.footer.content > img,
.footer.content > p {
    display: inline-block;
}

例1 jsFiddle

例2 jsFiddle

EDIT：<address>ではなく<span>を使用するセマンティクスも賢明かもしれません。例えば：

<div class="footer content">
    <img src="Images/facebook.png" />
    <img src="Images/Twitter.png">
    <address> 
        Address line 1
        Address line 2
        Address line 3
    </address>
</div>

<address>はブロックレベルの要素でもあるため、次のように正しいCSSを含める必要があります。

.footer.content > img,
.footer.content > address {
    display: inline-block;
}

最終的なjsFiddleの例

11
BenM

この作業例を確認してください here 。

.channels li {
    float: left;
    margin-left: 0.625em;
}
0
Bala Varadarajan

フッターとアドレスに固有の新しいタグを使用する場合、これは私の 例 です。

<footer id="footer">

    <span><img src="Images/facebook.png" alt="some text" /></span>
        <span> <img src="Images/Twitter.png" alt="some text"/></span>
                <span>
                    <address>
                        Address line 1
                        Address line 2
                    Address line 3
                    </address>    
            </span>
</footer>


#footer {display:inline;}
#footer address {display:inline }

画像の代替は、障害と標準を支援するために追加されました。

0
Juan

.content img, .content p { float:left } float：左/右-どこに配置するかによって異なります

0
Aleksandr Golubovskij

テキストの位置に合わせて画像の位置を調整する必要がある場合が多くあります。これを行うには、div内のテキストと画像を相対位置でラップしてから、画像に絶対位置を割り当てます。次に、上と余白を追加して、テキストに対する位置を調整します。 https://jsfiddle.net/edhescqn/3/

HTML：

<div class="amazonLink">
    <a href="#">
        <div class="amazonLink__text">Buy Now on Amazon</div>
        <img class="amazonLink__image" 
            src="http://cdn2.iconmonstr.com/wp-content/assets/preview/2016/240/iconmonstr-Amazon-1.png" width="24px" height="24px">
    </a>
</div>

CSS：

.amazonLink {
  position: relative;
  margin-top: 10px;
}

.amazonLink__text {
  display: inline-block;
  line-height: 40px;
}

.amazonLink__image {
  display: inline-block;
  position: absolute;
  top: 8px;
  margin-left: 5px;
}
0
Stephen Ainsworth

最も簡単な方法は、<span> の代わりに <p>。 <p>は、「独立した」終了する新しい段落を作成します。

0
greko