1

On my VF page I'd like to center a content of a grid column.

Code:

<apex:page>
    <head>
        <apex:slds />
    </head>

    <body>
        <div class="slds-grid slds-grid_align-center">
            <div class="slds-col slds-size_1-of-8 slds-box"></div>
            <div class="slds-col slds-size_1-of-4 slds-box">
                <button class="slds-button slds-button_brand" type="button">
                    Click Me
                </button>
            </div>
            <div class="slds-col slds-size_1-of-4 slds-box"></div>
            <div class="slds-col slds-size_1-of-4 slds-box">
                <button class="slds-button slds-button_brand" type="button">
                    Click Me
                </button>
            </div>
            <div class="slds-col slds-size_1-of-8 slds-box"></div>
        </div>
    </body>
</apex:page>

How does it look like:

enter image description here

How I want it to look like:

enter image description here

I thought an slds-grid_align-center style would do the trick but sadly does not. Is there any way to make it work?

Improve this question

1 Answer 1

Reset to default
5

slds-grid_align-center is used to position the grid cells from the center of the grid box. It does not center the content of those grid cells. In your case, what you're looking for is slds-align_absolute-center:

<apex:page>
    <head>
        <apex:slds />
    </head>

    <body>
        <div class="slds-grid">
            <div class="slds-col slds-size_1-of-8 slds-box"></div>
            <div class="slds-align_absolute-center slds-col slds-size_1-of-4 slds-box">
                <button class="slds-button slds-button_brand" type="button">
                    Click Me
                </button>
            </div>
            <div class="slds-col slds-size_1-of-4 slds-box"></div>
            <div class="slds-align_absolute-center slds-col slds-size_1-of-4 slds-box">
                <button class="slds-button slds-button_brand" type="button">
                    Click Me
                </button>
            </div>
            <div class="slds-col slds-size_1-of-8 slds-box"></div>
        </div>
    </body>
</apex:page>

slds-align_absolute-center

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .