import * as React from 'react'; import Head from 'next/head'; import Link from 'next/link'; import { Spacer } from '@1milligram/design'; import { RelatedPatterns } from '../../components/RelatedPatterns'; import { Pattern } from '../../constants/Pattern'; import { PatternLayout } from '../../layouts/PatternLayout'; import BrowserFrame from '../../placeholders/BrowserFrame'; const Details: React.FC<{}> = () => { return (

To center the content, you also can use other technique demonstrated in the{' '} Centering {' '} pattern.

...

`} css={` .avatar { /* Center the content */ display: inline-block; vertical-align: middle; /* Used to position the content */ position: relative; /* Colors */ background-color: rgba(0, 0, 0, 0.3); color: #fff; /* Rounded border */ border-radius: 50%; height: 48px; width: 48px; } .avatar__letters { /* Center the content */ left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); } `} >

); }; export default Details;