Text-align doesn't completely center

06/27/2019 22:19 Summerly#1

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:
[Only registered and activated users can see links. Click Here To Register...]

Example of what I want:
[Only registered and activated users can see links. Click Here To Register...]

Code:

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.

06/28/2019 22:40 florian0#2

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: [Only registered and activated users can see links. Click Here To Register...]

06/29/2019 05:48 iMostLiked#3

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?

06/30/2019 19:53 Michi#4

Try

HTML Code:

width: auto; or width: 100%;

and also try

HTML Code:

margin: 0 auto;

07/01/2019 14:23 TanGzkie#5

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 ...

07/02/2019 00:22 Summerly#6

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 screwing up.

Greets Summerly

07/02/2019 03:20 TanGzkie#7

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{} "

[Only registered and activated users can see links. Click Here To Register...]

07/02/2019 06:05 iMostLiked#8

Quote:

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 screwing up.

Greets Summerly

I still see no jsfiddle or html/css code in your startpost.
Please create a [Only registered and activated users can see links. Click Here To Register...] and share it with us.