#css #tiktok
Вопрос:
мой логотип TikTok не отображается в заголовке, и он не совпадает с именем. Как мне это исправить? Заранее спасибо за вашу помощь.
HTML :
lt;div class="header"gt; lt;h2 class="name"gt;Namelt;/h2gt; lt;a class="social-icon-header" href="https://www.tiktok.com/@xxx" target="_blank"gt; lt;img class="tiktok" src="images/TikTok-Icon-Logo.wine.svg"gt; lt;/agt; lt;/divgt; CSS:
.name { font-size: 250%; padding-top: 1%; } /* Social Icon */ .tiktok { width: 4em; height: auto; position: relative; float: right; } Ответ №1:
Вы используете конфликтующие поплавок и положение относительно. Пытаюсь удалить оба из них в элементе tiktock. и пытаюсь сгибать родительский контейнер с помощью элементов выравнивания.
.header { display: flex; align-items: center; justify-content: space-between; } .name { font-size: 250%; } /* Social Icon */ .tiktok { width: 4em; height: auto; } Комментарии:
1. Спасибо, Брент! Вместо использования gap:10 пикселей в заголовке, есть ли способ переместить логотип TikTok вправо? Я попробовал поплавок: правильно, но это ничего не дало.
2. конечно, используйте атрибут justify-content вместо gap. и установите его в промежуточное положение. Этого должно хватить для тебя. Я отредактировал код для вас выше.