The button itself is also flex-container but I don't think so , it affects it.
.join-telegram-button {
display: flex;
align-items: center;
background-color: var(--red);
border-radius: 32px;
max-height: 63px;
justify-content: space-between;
width: 50%;
min-width: 230px;
max-width: 320px;
padding: 0 20px;
margin-left: clamp(10px, 3vw, 50px);
cursor: pointer;
}
.icon-telegram {
margin-bottom: 0.25px;
object-fit: cover;
width: 20%;
max-width: 30px;
}
.join-telegram {
align-self: center;
letter-spacing: 0;
color: var(--white);
font-family: var(--font-family-poppins);
font-size: var(--font-size-xl);
font-weight: 700;
font-style: normal;
}
<button onclick="location.href='https://t.me/UTIKIofficial';" class="join-telegram-button">
<img class="icon-telegram" src="Icon simple-telegram.png" alt="Telegram Icon">
<h1 class="join-telegram">
Join Telegram
</button>
CodePudding user response:
Close the tag and make align to center it will work I think.
CodePudding user response:
Since you want the content to be centered inside the button you can apply justify-content: center;
to the join-telegram-button
class as below.
Also remember to close your <h1>
tag
.join-telegram-button {
display: flex;
align-items: center;
background-color: var(--red);
border-radius: 32px;
max-height: 63px;
justify-content: center;
width: 50%;
min-width: 230px;
max-width: 320px;
padding: 0 20px;
margin-left: clamp(10px, 3vw, 50px);
cursor: pointer;
}
.icon-telegram {
margin-bottom: 0.25px;
object-fit: cover;
width: 20%;
max-width: 30px;
}
.join-telegram {
align-self: center;
letter-spacing: 0;
color: var(--white);
font-family: var(--font-family-poppins);
font-size: var(--font-size-xl);
font-weight: 700;
font-style: normal;
}
<button onclick="location.href='https://t.me/UTIKIofficial';" class="join-telegram-button">
<img class="icon-telegram" src="https://via.placeholder.com/300.png/" alt="Telegram Icon">
<h1 class="join-telegram">
Join Telegram
<h1>
</button>
CodePudding user response:
You actually apply justify-content: space-between;
on your join-telegram-button CSS, this property actually align left/Right your child component.
Simple solution is to add flex: 1;
in your join-telegram CSS.
Updated your code snippet, I hope it'll help you out. Thank You
BLOCKER: You also forgot to close element.
.join-telegram-button {
display: flex;
align-items: center;
background-color: var(--red);
border-radius: 32px;
max-height: 63px;
justify-content: space-between;
width: 50%;
min-width: 230px;
max-width: 320px;
padding: 0 20px;
margin-left: clamp(10px, 3vw, 50px);
cursor: pointer;
}
.icon-telegram {
margin-bottom: 0.25px;
object-fit: cover;
width: 20%;
max-width: 30px;
}
.join-telegram {
align-self: center;
letter-spacing: 0;
color: var(--white);
font-family: var(--font-family-poppins);
font-size: var(--font-size-xl);
font-weight: 700;
font-style: normal;
flex: 1;
}
<button onclick="location.href='https://t.me/UTIKIofficial';" class="join-telegram-button">
<img class="icon-telegram" src="https://cdn.iconscout.com/icon/free/png-256/telegram-1867901-1580057.png" alt="Telegram Icon">
<h1 class="join-telegram">Join Telegram</h1>
</button>