3
\$\begingroup\$

I have surrounded my initials with a circle. This is intended to be a re-usable component in a responsive layout. (When it is re-used the text will always be two letters, and the font won't change. It behaves sensibly when the browser zooms in and out, but I haven't yet considered if a different component size is needed for very small screens.)

enter image description here

I tried two approaches, firstly with flex layout, and secondly using the box model, and I'm not sure which I prefer.

.flex-profile-icon {
  display: flex;
  flex: 0 0 auto;
  width: 6em;
  height: 6em;
  border-style: solid;
  border-radius: 50%;
  justify-content: center;
}

.flex-profile-icon-text {
  align-self: center; /* center on cross-axis, i.e. vertically */
  font-size: 300%;
}

.trad-profile-icon {
  width: 6em;
  border-style: solid;
  border-radius: 50%;
  line-height: 0;
  position: relative;
}
.trad-profile-icon:after {
  content: "";
  display: block;
  padding-bottom: 100%; /* hack for equal height to width */
}
.trad-profile-icon-text {
  position: absolute;
  bottom: 50%;
  width: 100%;
  text-align: center;
  font-size: 300%;
}

/*
Copyright 2019-2020 by dcorking and Code Boxx
*/
<p>
  Aim is for the text to be centered in the circle
</p>

<h2>Flexbox layout</h2>
<div class="flex-profile-icon">
  <a class="flex-profile-icon-text">
    DC
  </a>
</div>

<h2>Traditional box layout</h2>
<div class="trad-profile-icon">
  <div class="trad-profile-icon-text">
    DC
  </div>
</div>
<p>
  Credit for the traditional box layout approach due to <a href="https://code-boxx.com/css-circles-text/#sec-text"><em>How to Create CSS Circles (And Add Text To It)</em>, W.S. Toh of Code Boxx </a> 
</p>

I will be interested in your recommendations on maintainability, cross-browser compatibility, and compatibility with layout frameworks such as Foundation (XY Grid or Float Grid) and Bootstrap.

Codepen

\$\endgroup\$

1 Answer 1

2
\$\begingroup\$

Try this approach. It uses CSS Grid layout. It requires less code and is easier to maintain.

.circle {
  display: grid;
  place-content: center;
  border: 0.3em solid black;
  border-radius: 50%;
  width: 6em;
  height: 6em;
}

.initials {
  font-size: 300%;
}
<div class="circle">
  <div class="initials">DC</div>
</div>

\$\endgroup\$
3
  • 2
    \$\begingroup\$ Welcome. Instead of presenting an alternative approach, on this community we are looking to improve existing provided solutions \$\endgroup\$ Jan 5, 2021 at 13:22
  • 2
    \$\begingroup\$ Then again, Pi314 offered two measures according to which s/he thinks this alternative preferable. \$\endgroup\$
    – greybeard
    Jan 5, 2021 at 16:23
  • \$\begingroup\$ You have simplified 4 lines of my layout code to just 2. I particularly like that all the layout code is in the circle class: so clearly easier to maintain. \$\endgroup\$
    – dcorking
    Jan 5, 2021 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.