BWD Button+2 centering question

Hi all!

First post here… Love the BWD plugins. Appreciate anyone’s time who can help me out!

I’m trying to use BP2 to create a Linktree page on my website (e.g. https://linktr.ee/selenagomez)

I’m getting close but I’m wondering if anyone knows how I might centre the text so that it’s actually in the centre of the page, instead of off-centre to the right because of the added icon? As per the cross in the attached photo

Also, the mobile version doesn’t seem to centering correctly for multiple-line text. Has anyone else experienced this? As per this screenshot: https://www.dropbox.com/s/656ygjauh7y6dxc/Screenshot_20200910-125242.png?dl=0

Thanks so much in advance for any responses,

~ Ru

I don’t have an answer for you, but I bet if/when you manage to do what you want it’ll look wrong. At the moment the text in centred in the white space, and to my mind this is how the human brain will see it: Centred. If you pull it to the left it will technically be Centred in the button but I bet it’ll look wrong.

Not to mention, IMO, from an aesthetic POV, it looks better as it is. The button isn’t balanced, in that it’s got a big icon on one side, trying to balance it up will result in it looking a bit rubbish. IMO.

Regards the image above… What I personally would do though is reduce the width of the buttons from 100% of the container to about 75. And maybe shove them all to the right a wee bit, to really unbalance them.

2 Likes

This is just how things centre in HTML. I suppose you could try add the fa code onto the end of the button text, for a white fa icon or two which will move the text to the left.

However I think it looks OK and when things don’t line up or centre I am really picky.

I can’t help noticing that the centre of the top YouTube icon does not line up with the text = LYRICS / CHARTS. I would immediately leave your site for that type of miss alignment:)

In addition the crappy fa4 icons are not centred well or aligned with each other.

1 Like

ButtonPlus2 actually applies margins to the text specifically to account for the size of the icon and ensure that the text is centered within the remaining area of the button.

Without this adjustment then the text will, by default, be in the middle of the entire button including icon - just as you want it to be.

You can override this alignment very easily with the following CSS:

.bp-text{
margin-left:0!important
}
1 Like

If the Alignment and the Responsive Align (if used) is set to Centre then the text will be aligned as you want.

Thanks everyone for the replies!! Really appreciated

@steveb I take your point! but I’m copying the aesthetic of this website - https://linktr.ee/selenagomez - and I really like the effect

@Webdeersign I know!! That bugs me too haha. And I don’t blame ya for leaving the site :P I don’t know how to fix it though. I’m really new to the world of custom code, so I’m hitting this project one step at a time.

@tav really grateful for that reply and your time, I’ll give that a shot tomorrow :)