# Center button text?

**URL:** <https://forums.realmacsoftware.com/t/center-button-text/48143>\
**Category:** Elements\
**Created:** [June 18, 2025, 6:38pm UTC](https://forums.realmacsoftware.com/t/center-button-text/48143 "2025-06-18T18:38:38Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 18, 2025, 6:38pm UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/1 "2025-06-18T18:38:38Z")

</div>

Is there a setting in the Inspector to center button text? This does nothing:

 ![Screenshot 2025-06-18 at 1.35.45 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/d/ede501b9405cb358d26f772d666b694f2c505803.png)

The Elements Bot (nice addition!) says add this code and I did and that does work, but there must be a novice friendly setting that I am missing:

 ![Screenshot 2025-06-18 at 1.37.05 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/d/cd09aba56bedac28c4c2ae33d1f27e31acc74919.png)  
 ![Screenshot 2025-06-18 at 1.37.21 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/3/d/3dbdd263a251cd262233fa4e325c3bb87c9c4e12.png)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 18, 2025, 6:42pm UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/2 "2025-06-18T18:42:21Z")

</div>

It looks like your text is already centered in the button? You don’t need that class.

 ![CleanShot 2025-06-18 at 7 .41.28@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/5/65c090e021d47a8b87548533e8247a05f5dbb2b2.png)

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [June 18, 2025, 6:43pm UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/3 "2025-06-18T18:43:50Z")

</div>

Strange it works for me, I can move the text left, right, or centered without any problems.

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 18, 2025, 8:50pm UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/4 "2025-06-18T20:50:47Z")

</div>

@dan That is how I have it set. I copied this button from the North Eleven project, and I think that’s the problem. I had similar issues with text I copied from there. Anyway, I added another button and set it to align center and that works. Both of these are set the same and you can see the difference. Once the text gets too long for one line then the top button shifts to align left where the bottom one stays aligned center. One line text is centered on both:

 ![Screenshot 2025-06-18 at 3.48.44 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/3/d37bfab0c0aa722a436341919900a46b6f4d3c85.png)

 ![Screenshot 2025-06-18 at 3.50.33 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/5/7543cb01fe30cddb79bcb47a6970a91b0a685dc8.png)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 18, 2025, 9:07pm UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/5 "2025-06-18T21:07:36Z")

</div>

Can you share a sample project (via Elements Cloud) with the misaligned button in so we can take a closer look at what’s going on?

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 18, 2025, 9:36pm UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/6 "2025-06-18T21:36:27Z")

</div>

@dan Here’s the sample project link:

elementsapp://downloadDocument/9B117gOrOafq

---

<div class="post-metadata">

**Author:** ![jbyfield](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbyfield/32/82_2.png) [@jbyfield](https://forums.realmacsoftware.com/u/jbyfield)\
**Post date:** [June 18, 2025, 9:46pm UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/7 "2025-06-18T21:46:55Z")

</div>

Think this issue could be in the North Eleven project. I initially used that as a base and the button at the bottom of this page is left aligned even though it is set to being centred - [Blackrock Apartments Queenstown](https://www.blackrockq.com/bookings/)

None of the alignment settings do anything to the button text on any of the pages on that site.

Another site I am working on has a button copied from that site with the same result, left aligned only, and a button I made from scratch which is fully adjustable.

I am going to delete the buttons that don’t work and replace them with new ones so the above link will only show the error for a few hours before I republish.

---

<div class="post-metadata">

**Author:** ![jbyfield](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbyfield/32/82_2.png) [@jbyfield](https://forums.realmacsoftware.com/u/jbyfield)\
**Post date:** [June 18, 2025, 10:16pm UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/8 "2025-06-18T22:16:05Z")

</div>

Ok, this might help. New button was working fine until I set an external link and it immediately jumped to left align only.

Deleted the link and the button text re-centred. Same thing when setting any link.

---

<div class="post-metadata">

**Author:** ![bruce](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bruce/32/23155_2.png) [@bruce](https://forums.realmacsoftware.com/u/bruce)\
**Post date:** [June 19, 2025, 12:23am UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/9 "2025-06-19T00:23:43Z")

</div>

I continue to see strange things with any text in line two of the button. And as @jbyfield says, deleting the link and the text aligns again as set in the inspector.

 ![Screenshot 2025-06-18 at 7.23.28 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/5/d/5d658d425b0af967312cde192e1c8fb91a78b4a0.png)

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 19, 2025, 4:00am UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/10 "2025-06-19T04:00:38Z")

</div>

this appears to be an issue when setting links internal or external on multi lines in a component button in this case

if I add text-centre in the CSS Classes for the button the text centers even with links

created new button

also if you set a link in a button with multi lines width set to auto it stretches across the screen unless you set a width, see in video

if I set the link link on text rather than the button no issues

---

<div class="post-metadata">

**Author:** ![jbyfield](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jbyfield/32/82_2.png) [@jbyfield](https://forums.realmacsoftware.com/u/jbyfield)\
**Post date:** [June 19, 2025, 6:37am UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/11 "2025-06-19T06:37:47Z")

</div>

Which of your two solutions is considered the ‘best’ way to resolve this, am guessing the CSS on the button?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 19, 2025, 7:32am UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/12 "2025-06-19T07:32:28Z")

</div>

@ben would be best placed, perhaps we are missing something, or how the link is dealt within the button re centering

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [June 19, 2025, 12:39pm UTC](https://forums.realmacsoftware.com/t/center-button-text/48143/13 "2025-06-19T12:39:07Z")

</div>

Okay, I’ve looked into this issue and it appears that when you add a link to the button, it aligns the text to the left if the text is so long it spans multiple lines. So yes, this is a little bug.

I’ll get @ben to fix this issue in the next couple of weeks!
