Question posted in 
How to set these two colored handcuff items to be centered at the middle of a sentence? For me they seem to be floating in the middle and I wanted them fixed on the bottom aligned with the words.
I’ve tried position: absolute but it didn’t work
I’ve tried to leave it that way but add blank spaces to make the text fit in better but it doesn’t look right to do that way.
Here the code, I hope you guys can understand it its my first time doing 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>
3
Answers
Try below code
You can use span with inline-block or find a character instead
You can make the
<p>element use a wrapping Flexbox with a gap, and give the<img>elements an alignment ofcenter.