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.