How to center a Basic text element

How To
1

Must be missing something obvious here … but how do i centre a basic Text element?

If I add a container with Centre align and drop a Rich Text element into it, it respects the alignment. But if I drop a Basic text element into the same container then that does not respect any alignment.

Is this how it is supposed to work or am i missing something?

Thanks
Alan

2

Hi Alan,

the basic text element is a block-level element by default. You can change the text alignment inside a block-level element with text-align, not with the flexbox controls.

Block level elements will always fill up the available space by default, unlike inline elements.

Check this article: Block-level elements - HTML: HyperText Markup Language | MDN

Best regards,
timmse

3

Lol sadly the article you point at made no sense to me at all.

So if I edit the basic text element and go to style - layout - align they should work? Sadly none do anything at all.
I also note that there is an option to change the display from block to inline … but that didn’t change anything either.

I’m happy to just ignore the Basic Text Element and do everything with the Rich Text one, but would like to know why the basic one doesn’t do as i expect.

Alan

4

Nope, because the block level element still takes up the entire space :wink:
You can set it to inline, but it still takes up the entire space. Set the width to auto, and the flexbox alignment works.

Or change the selector to span, which is an inline element… :smiley:

5

You should also be able to go to the Style tab, select Typography and center it using the Text Align option.

image

6

Yup… it’s not like I haven’t mentioned this before :smiley:

7

Ah typography. Yep that does it. Really really not very intuative though is it.

So the Align part of Layout, which does nothing. Couldn’t that be greyed out for block elements?

You know I thought I was getting to grips with Bricks but lately it seems to be all slipping away. Probably my age. :frowning:

Many thanks
Alan

8

So if the Basic Text Element throws you off track like that… :sweat_smile:

As you said yourself: no one forces you to use the element if you can’t handle it (no offense). That’s why there is still the rich text element, which now has much more features than the text element before. To grey the alignment part out isn’t an option because they work and behave as expected.

Let’s abbreviate: the rich text element is for everyone, the basic text element for experienced users (I love it btw) :smiley:

9

Absolutely. I only tried it as I thought it would be lighter somehow. But as it doesn’t make much sense to me I shall just ignore it.

So another idea. We can already pin our favourite widgets/elements in Bricks … how about having the inverse and allowing us to drop our least used/least favourite elements in a bucket at the bottom. Would keep them out of the way but still findable if really needed.

Cheers
Alan

10

You can remove unused or unwanted elements completely using this filter within a child theme: Filter: bricks/builder/elements – Bricks Academy

Please check out the child theme, which can be downloaded in your Bricks Account.

Alternatively, you can go the other way around and pin every element, you use on a regular basis so the other elements will stay way more at the bottom?