[CSS] Text-align doesn't completely center

[Summerly]

Hi guys,

Looking for a little help here. I don't have any knowledge of coding or whatsoever but managed a little here and there by just trying. I'm stuck on something that really bothers me:

Text-align: center does kinda center my text but I would like to move it slightly to the left so the text matches with the avatar. I have no idea how to do this.

Example of what bothers me:


Example of what I want:


Code:

.userLevelContainer {
	position: relative;
	background: $userlevelColor_001;
	box-sizing: content-box;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	height: $userLevelBarHeight;
	width: 110%;
	text-align: center;
	border-radius: $userLevelBorderRadius;
	padding: 3px;
	
	.badgeOnline {
		position: absolute;
		left: -1px;
		bottom: -1px;
		color: transparent;
		padding: 0;
		background-color: #27ae60;
		border: 1px solid rgba(255, 255, 255, 1);
		border-radius: 50%;
		content: "";
		height: 13px;
		width: 13px;
	}
	
	.userAvatar {
		.userAvatarImage {
			border-radius: $userLevelBorderRadius;
			height: $userLevelBarHeight !important;
			width: $userLevelBarHeight !important;
		}
	}
	
	.userLevel, .username {
		line-height: $userLevelBarHeight;
		font-weight: bold;
	}
	
	.userLevel {
		color: #fff;
		padding: 0 10px 0 5px;
		font-size: 18px;
	}
	
	.username {
		background-color: $wcfSidebarBackground;
		flex: 1;
		border-radius: $userLevelBorderRadius;
		padding-left: 10px;
		font-size: 16px;
		color: $wcfSidebarText;
		top: 0px;
		white-space: nowrap;
		overflow: visible;
		text-overflow: ellipsis;
		
		
		&:hover {
			color: $wcfSidebarLinkActive;
		}
		
		&.longUsername {
			font-size: 16px;
		}
	}

Thanks in advance.

[florian0]

It's kinda hard to work with this. Can you put the CSS code as text so we can test without having to copy the CSS from the image? Having the corresponding HTML would also be nice.

Best would be to create a simple example in a fiddle:

[iMostLiked]

Well, that probably is because of setting the width to 110%, which causes the container to move slightly to the right. Have you tried setting the width to 100%?

But yeah, just create a fiddle as @florian0 already suggested and please include your html code as well as css code. We can't really help you with that.

Also, why are you centering the text with text-center if you're already using flexbox?

[Michi]

Try

width: auto; or width: 100%;

and also try

margin: 0 auto;

[TanGzkie]

try to remove Padding and others of the Container and the only leftbehind is text-aling:center ;

if you want to debug it goto moz/chrome right click Inspect->bottom left style and find the Container and childs to edit it ...

[Summerly]

Thank you for your replies.

Florian0 : I edited my post with an editable code, sorry for that.

iMostLiked : I tried changing it to 100% but that reduces the width of the complete box, keeping the text at the same spot.

Michi : Your ideas unfortunately didn't work, thank you though.

TanGzkie : I can't delete parts of the code since this code is overlapping the base-code which pretty much uses the same commands. I would have to unwrap the package of the plugin to change the original code & I am pretty afraid of ******** up.

Greets Summerly

[TanGzkie]

I attach some picture so that you can analyze it
i can edit it using Inspect of browser... but if i hit f5 = refresh page..
it will be gone.. my intension is to know what is the exact design i want

you will notice to the bottom right it has an " td.alt{} "

[iMostLiked]

Originally Posted by Summerly

Thank you for your replies.

Florian0 : I edited my post with an editable code, sorry for that.

iMostLiked : I tried changing it to 100% but that reduces the width of the complete box, keeping the text at the same spot.

Michi : Your ideas unfortunately didn't work, thank you though.

TanGzkie : I can't delete parts of the code since this code is overlapping the base-code which pretty much uses the same commands. I would have to unwrap the package of the plugin to change the original code & I am pretty afraid of ******** up.

Greets Summerly

I still see no jsfiddle or html/css code in your startpost.
Please create a and share it with us.