0

I am trying to center the button and span elements so they are horizontally and vertically centered within the .element div. I have a .container wrapper div which houses the three .element divs as a flexbox style setup.

I am also trying to get the button and span elements to stack above one another whilst contained within the .element div.

I have tried adding justify-content: center and align-items: center within the .element div with no success.

Please find code attached:

.pageContent {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 8px;
}

.pageContent.broaden > .container {
    display: flex;
    flex-direction: row;
    height: 50%;
}

.pageContent.broaden > .container > .element {
    flex: 1;
    border: 1px solid rgba(255,255,255,0.1);
    padding: 12px;
}

.pageContent.broaden {
    height: calc(100vh - 64px);
    background: #0a1325;
}

.pageContent.broaden > .container > .element > button {
    width: 105px;
    height: 105px;
    margin: 0 0 12px 0;
    border: 2px solid #fff;
    border-radius: 100%;
}

.pageContent.broaden > .container > .element > span {
    color: #fff;
    font-size: 10pt;
}

.pageContent.broaden > .container > .element > span > a {
    color: #0066cc;
    text-decoration: underline;
}
<div class="pageContent broaden">
                    <div class="container">
                        <div class="element">
                            <button style="background: rgb(3, 182, 252);">
                                <svg width="60" height="60" viewBox="0 0 512 512">
                                    <g style="fill: #fff;">
                                        <g>
                                            <path d="M493.09 351.3L384.7 304.8a31.36 31.36 0 0 0-36.5 8.9l-44.1 53.9A350 350 0 0 1 144.5 208l53.9-44.1a31.35 31.35 0 0 0 8.9-36.49l-46.5-108.5A31.33 31.33 0 0 0 125 .81L24.2 24.11A31.05 31.05 0 0 0 0 54.51C0 307.8 205.3 512 457.49 512A31.23 31.23 0 0 0 488 487.7L511.19 387a31.21 31.21 0 0 0-18.1-35.7zM456.89 480C222.4 479.7 32.3 289.7 32.1 55.21l99.6-23 46 107.39-72.8 59.5C153.3 302.3 209.4 358.6 313 407.2l59.5-72.8 107.39 46z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            <span>Call Summit Support on <a href="tel:0400000000">0400 000 000</a>.</span>
                        </div>
                        <div class="element">
                            <button style="background: rgb(139, 195, 74);">
                                <svg width="60" height="60" viewBox="0 0 512 512">
                                    <g style="fill: #fff;">
                                        <g>
                                            <path d="M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            <span>Email Summit Support on <a href="mailto:support@summitlms.com">support@summitlms.com</a>.</span>
                        </div>
                        <div class="element">
                            <button style="background: rgb(255, 87, 34);">
                                <svg width="60" height="60" viewBox="0 0 448 512">
                                    <g style="fill: #fff;">
                                        <g>
                                            <path d="M224 32c106 0 192 28.75 192 64v32c0 35.25-86 64-192 64S32 163.25 32 128V96c0-35.25 86-64 192-64m192 149.5V224c0 35.25-86 64-192 64S32 259.25 32 224v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5m0 96V320c0 35.25-86 64-192 64S32 355.25 32 320v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5m0 96V416c0 35.25-86 64-192 64S32 451.25 32 416v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5M224 0C145.858 0 0 18.801 0 96v320c0 77.338 146.096 96 224 96 78.142 0 224-18.801 224-96V96c0-77.338-146.096-96-224-96z"></path>
                                        </g>
                                    </g>
                                </svg>
                            </button>
                            <span><a href="#">Click here</a> to access the external Summit knowledge base.</span>
                        </div>
                    </div>
                </div>

Thanks for your help.

tcarpenter17
  • 119
  • 8

1 Answers1

2

I have tried adding justify-content: center and align-items: center within the .element div with no success.

That’s because it is not actually a flex element yet - you need to add display:flex for that as well.

(You specified flex: 1, but that does not make the element itself a flex element, it only specifies its behavior as a child of a flex element, in terms of automatic growing/shrinking.)

CBroe
  • 82,033
  • 9
  • 81
  • 132