it-swarm.com.ru

Как привести изображения в соответствие с текстом в CSS

Я создаю нижний колонтитул моего сайта, используя HTML и CSS.

Я хочу, чтобы два изображения в 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--> 

Может кто-нибудь помочь, пожалуйста?

10
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

Проверьте этот рабочий пример здесь .

.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