I'm attempting to have 2 text elements on a button. It's a label and a right arrow. I want the right arrow to be on the right side of the button and the text to be in the center.
It seems the justify field for the individual items isn't working and I'm unsure why. (I'm new to html/css).
Right now I have the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Site.css" media="screen"/>
<title>
Remote Client
</title>
<body>
<center><h2>Available HMI Remote Clients</h2><center>
<div class="container">
<center><a href="#" class="imagebutton">
<text>1111</text>
<span>→</span>
</a></center>
</div>
</body>
</html>
With the following CSS:
.container > * {
margin: 2rem 0;
}
.imagebutton {
background: url("Images/miner.jpg") center;
display: inline-flex;
height: 150px;
width: 300px;
border: double;
font-size: 2rem;
border-radius: 1rem;
color: #fff;
font-family: 'Space Mono', monospace;
letter-spacing: 1px;
text-decoration: none;
}
.imagebutton:active {
background-color: #3e8e41;
transform: translateY(2px) translateX(-1px);
}
.imagebutton text{
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.imagebutton span{
display: flex;
align-items: center;
justify-content: right;
padding: 1rem;
font-size: 3rem;
}
And the output comes out like this:
