Использование изображения в середине текста

Как расположить эти два цветных наручника по центру в середине предложения? Для меня они кажутся плавающими посередине, и я хотел, чтобы они были закреплены внизу, в соответствии со словами.

Я пробовал позицию: абсолютную, но это не сработало

Использование изображения в середине текста

Я пытался оставить все как есть, но добавил пробелы, чтобы текст лучше вписывался, но это выглядит неправильно.

Вот код, надеюсь, вы, ребята, его поймете, я впервые занимаюсь html.

.links {
    text-decoration: none;
}
.title {
    font-style: bold;
    text-align: center;
    float: none;
}
.home {
    float: left;
    margin-top: 15px;
 }
.home img{
    transition: transform 0.3s ease-in-out;
}
.home img:hover{
    transform: scale(1.2);
}
header {
    margin-bottom: 10px;
}
.image{
    width: 200px;
    height: 200px;
    float: left;
    margin-left: 50px;
    margin-bottom: 10px;
}
.text {
    margin-right: 10px;
    margin-left: 10px;
    text-align: center;
}
.collapsible {
    background-color: rgb(0, 0, 0);
    color: rgb(255, 255, 255);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: center;
    outline: none;
    font-size: 20px;
  }
  
.active, .collapsible:hover {
    background-color: #000000;
    border: solid;
  }
  
.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-image: url("https://i.imgur.com/GQeCTzH.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    text-align: center;
  }
.classimage {
    width: 30%;
    padding: auto;
}
.img {
    vertical-align: middle;
    width: 300px;
    display: inline;
    clear:both;
    display: block; 
}
.cuffs {
    position: absolute;
}
.divcuffs {
    margin: auto;
}

<!DOCTYPE html>
<html lang = "fr">
<head>
    <meta charset = "UTF-8"/>
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0"/>
    <title>Anarchy City Guide</title>
    <link rel = "stylesheet" href = "features.css"/>
    <script src = "script.js"></script>
</head>
<body style = "padding: 1%; background-image:url(https://i.imgur.com/2aXjBml.jpeg); background-size: 20%; color:rgb(255, 255, 255); font-size: 130%; font-family:Arial">
  <header style = "padding: 0%; background-color:rgb(0, 0, 0); border:solid; border-width:1,5px; font-size: 100%; font-family:Arial">
        <div class = "home">
           <a href = "../index.html"> 
        <img src = "https://i.imgur.com/tu8s4mv.png">
        </a>
        </div>
        <div class = "title">
            <h1>ANARCHY CITY GUIDE</h1>
        </div>
    </header>
    <div class = "text">
        <h1>Features</h1>
    </div> 
    <button type = "button" class = "collapsible">Food</i></button>
      <div class = "content">
        <p>You can buy food at the <img src = "https://i.imgur.com/kAv86Da.png"> icon to fill your hunger. Hungrier you are, longer it's gonna take to passively regenerate health.
        <br>Eating will also give you <text style = "color:#55EF64">?HP</text></p>
        <p>You can buy beers at the <img src = "https://i.imgur.com/yjZYWo1.png"> icon. Beers are gonna give you <text style = "color:#3389FF">?AP</text> up to <text style = "color:#3389FF">?AP</text></p>
      </div>
    <button type = "button" class = "collapsible">Bank</i></button>
      <div class = "content">
        <br>
        <img src = "https://i.imgur.com/UQf04lL.png" class = "classimage"><img src = "https://i.imgur.com/GDNj1Jl.png" class = "classimage">
        <p>You can access to your bank account through <text style = "color:#0fdbc0">Banks Counters</text> and <text style = "color:#0fdbc0">ATMs.</text></p>
        <img src = "https://i.imgur.com/ljVKKLb.png" class = "classimage">
        <p>Press <text style = "color:#9CA9B5">U</text> to get in the animation, then press <text style = "color:#9CA9B5">E</text> to access the bank menu.</p>
        <p>Regular Banks vaults are limited to $300,000, ATMs to $50,000 and Pacific Standard to $3,000,000.
        <br>You can do the Gruppe6 job to make the vaults back to 50/50%.</p>
      </div>
    <button type = "button" class = "collapsible">Handcuffing</i></button>
      <div class = "content">
        <br>
        <img src = "https://i.imgur.com/fhddF2z.png" class = "classimage"><img src = "https://i.imgur.com/dPpczLD.png" class = "classimage">
        <p>To be able to handcuff someone you need him to be in <text style = "color:#EF677B">Ragdoll</text> or <text style = "color:#EF677B">Injured State</text>.</p>
        <img src = "https://i.imgur.com/PID9imx.png" class = "classimage"><img src = "https://i.imgur.com/3pCCEaU.png" class = "classimage">
        <p>Then press <text style = "color:#9CA9B5">Left mouse click</text> with handcuffs in hands.
        <br>He's now handcuffed for 300sec, all his items are dropped on the ground.</p>
        <img src = "https://i.imgur.com/G9XDunx.png" class = "classimage">
        <p>Now to pick up the guy you need him to be in ragdoll again, then press <text style = "color:#9CA9B5">Insert</text> next to him.</p>
        <img src = "https://i.imgur.com/SBffryN.png" class = "classimage">
        <p>You can now bring him to jail at <div class = "divcuffs"> <img src = "https://i.imgur.com/YHg6fgD.png" class = "cuffs"></div> if you are in a <a target = "_blank" class = "links" href = "../factions/factions.html" style = "color:#1457e6">Government</a> faction or kidnap him at <img src = "https://i.imgur.com/XB8pjkf.png" class = "cuffs"> if you are a <a target = "_blank" class = "links" href = "../factions/factions.html" style = "color:#FF400E">Criminal</a></p>
        <img src = "https://i.imgur.com/34e8kzY.png" class = "classimage">
        <p>You can also free him with handcuff keys</p>
        <p>Also remember that you <b> CANT </b> cuff other government members, you will become responsible for their lives if you put them in danger. Meaning that if you use your taser on a cop and he dies, you die too. 
      </div>
    <script>
        var coll = document.getElementsByClassName("collapsible");
        var i;
        
        for (i = 0; i < coll.length; i++) {
          coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
              content.style.display = "none";
            } else {
              content.style.display = "block";
            }
          });
        }
    </script>
</body>
</html>

Было бы очень здорово, если бы вы показали свою разметку и CSS. Я обычно указываю стиль изображения = "display: inline-block; margin: 1px 3px;"

— 17.06.2024 18:59

Пожалуйста, нажмите изменить , затем кнопку с пометкой [<>] и дайте нам минимальный воспроизводимый пример

— 17.06.2024 19:00

Возможно пролеты с использованием линейного блока, тогда вы можете закрыть пролеты наручниками.

— 17.06.2024 19:01

html css

17.06.2024 18:53

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Попробуйте ниже код

.sentence {
  font-size: 18px;
  line-height: 1.6;
}

.icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin: 0 5px;
}

<p class = "sentence">
  You can now bring him to jail at <img src = "handcuff-icon.png" alt = "cat" class = "icon">. if you are in a
</p>

Вам нужна библиотека шрифтов или изображение из imgur.

— 17.06.2024 19:07

Мой проклятый спаситель, спасибо, это сработало как чудо!

— 17.06.2024 19:09

17.06.2024 19:06

Вы можете использовать интервал со встроенным блоком или вместо этого найти символ.

<span>You can now bring him to jail at </span><span style = "background-color:blue">🔗</span><span>if you are in a
<span style = "color:"blue">government faction</span> or kidnap him at <span style = "background-color:red">🔗</span> if you are a <span style = "color:red">Criminal</span>

17.06.2024 19:07

Вы можете заставить элемент <p> использовать оберточный Flexbox с пробелом и присвоить элементам <img> выравнивание center.

body { background: #222; color: #fff; }
.highlight { font-weight: bold; }
.bad { color: #f40; }
.good { color: #04f; }

.rich-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.rich-text img {
  align-self: center;
}

<p class = "rich-text">
  You can now bring him to jail at
  <img src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AYht+makUqInYQcchQnSyIfzhqFYpQIdQKrTqYXPojNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfE2cFJ0UVK/C4ptIjxjuMe3vvel7vvAKFWYprVNgpoum2mEnExk10RQ6/oQC9NYFJmljErSUn4jq97BPh+F+NZ/nV/jm41ZzEgIBLPMMO0ideJpzZtg/M+cYQVZZX4nHjEpAsSP3Jd8fiNc8FlgWdGzHRqjjhCLBZaWGlhVjQ14gniqKrplC9kPFY5b3HWShXWuCd/YTinLy9xndYgEljAIiSIUFDBBkqwEaNdJ8VCis7jPv4B1y+RSyHXBhg55lGGBtn1g//B795a+fExLykcB9pfHOdjCAjtAvWq43wfO079BAg+A1d601+uAdOfpFebWvQI6NkGLq6bmrIHXO4A/U+GbMquFKQl5PPA+xl9UxbouwW6Vr2+Nc5x+gCkqVfJG+DgEBguUPaaz7s7W/v2b02jfz9cfnKeVYj9MwAAAAZiS0dEAAAAPgD/+rScaAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gGERECDplMcNcAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABcUlEQVQ4y4XSMWsUURQF4G+HcVhQA1O41hptXmkK8Tf4Jyy1s7CICJIoLNgLilgodnb5A9pYBsupoo2QJoEnBsJmXYLF3NnMZl09zb3v3fMu5577BlKuNPVUypUWM019KuUCZdTa/KzWcpt6WmjqqQ5tXsap7NXKc7WOq5wr4ImUH2BNyr/wTsq3cQ0/pHwRl3BDDwVIeQuP8RufIj7EHbyPJnfxQcpf+g0G0eAAU6xr6omUh/iGK8Hbx0/UuKepPy8qYA27mnoS802wG7WXuI4L2MZ4UUHr6D4mQezwHUOMwvnj+SZaL0rMOgWvMYpHHyOO4r6U8vbCdnjWbaXzoMJT3MdlHOGtpt6U8hiPcICvuBXevMDzQf9TRLNhGNl9sM7gmyG/CIMrXPVfpHwi5Z1zdztSPulv4V84wkasVsSNuFdIuZqP0c/PvHkVhu6Fkr04v+mTlvNFyWMpH8Y4h2Hsikd/a7gqLnmwSsEyZh33Dyobl33ZOQjsAAAAAElFTkSuQmCC" width = "12px" height = "12px">
  if you are in a
  <span class = "highlight good">Government</span>
  faction or kidnap him at
  <img src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AYht+makUqInYQcchQnSyIfzhqFYpQIdQKrTqYXPojNGlIUlwcBdeCgz+LVQcXZ10dXAVB8AfE2cFJ0UVK/C4ptIjxjuMe3vvel7vvAKFWYprVNgpoum2mEnExk10RQ6/oQC9NYFJmljErSUn4jq97BPh+F+NZ/nV/jm41ZzEgIBLPMMO0ideJpzZtg/M+cYQVZZX4nHjEpAsSP3Jd8fiNc8FlgWdGzHRqjjhCLBZaWGlhVjQ14gniqKrplC9kPFY5b3HWShXWuCd/YTinLy9xndYgEljAIiSIUFDBBkqwEaNdJ8VCis7jPv4B1y+RSyHXBhg55lGGBtn1g//B795a+fExLykcB9pfHOdjCAjtAvWq43wfO079BAg+A1d601+uAdOfpFebWvQI6NkGLq6bmrIHXO4A/U+GbMquFKQl5PPA+xl9UxbouwW6Vr2+Nc5x+gCkqVfJG+DgEBguUPaaz7s7W/v2b02jfz9cfnKeVYj9MwAAAAZiS0dEAAAAPgD/+rScaAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAd0SU1FB+gGERECJ9v+6LsAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAABbklEQVQ4y4XSvWpUURQF4G8u18tANHALx+JU8ecFTCE+gy9hqZ2FRUQQozBgLyhiodjZ5QW0sQw+QbSRmyaBIwZkMg5i4T5wMpnoavY++4+11z6jnHT9YJ6Tzl8s+sHvnDRoI9egrXId9IN50w/m0Sj8Np5tlWuXcqVWWxjgYU7uYj0nP/AmJzewgW85WcN5XFWhgZw8xgP8woew93ATb2PILbzLyad6wCgGHGCOK/1glpMxvuBi1O3jO3rc7gcfTzDAOnb7wSz2m2E3cs9xGeewjekJBqHoPmZRWPAVY0xC+Z/lEqFFi0Vh8BKTaHofdhLxNifb9XXwpFylaNDhEe7gAo7wuh9s5WSK+zjAZ1wPbZ7h6aj+FDFsHEKWD1YEvhb0mxC4wyX/Q06Oc7KzFNvJyXF9hX/hCJtxWmE3I67JSVfWqP1Kmxch6F4w2Yv3q7rolL9EeZqTw1jnMIRd3bRq4Fn2lAZnMViBRan9AzDnlcr/cs1PAAAAAElFTkSuQmCC" width = "12px" height = "12px">
  if you are a
  <span class = "highlight bad">Criminal</span>.</p>

17.06.2024 19:18

Другие вопросы по теме

Как исправить положение стрелки в этой пользовательской хлебной крошке на основе Bootstrap 5.2.0?

Размер сетки не изменяется по ширине элементов

Разница в поведении переполнения флексбокса между React и React Native

SVG текстура плиточная плоскость

Есть ли способ сделать цвета ярче в CSS?

Флажки формы Bootstrap 5.3.0 имеют разную ширину

Наложение сетки прозрачных изображений на сетку фоновых изображений

Как событие Mouseclick в текстовом элементе SVG может переопределять непрозрачность и заливку того же элемента в CSS?

Мой Javascript и CSS не работают должным образом в HTML

Как найти значение трех входов

Использование изображения в середине текста

Ответы 3

Другие вопросы по теме

Похожие вопросы