CODEWITHSUNDEEP
htmlcssflexbox
Anthony Kong
Anthony Kong

Reputation: 40784

Unable to make a circle with border-radius and align it vertically with next element

Here is the outcome

enter image description here

What I want to achieve are

  1. A gray circle surrounding the '<' with the letter in the center

  2. It and 'untitled' aligns vertically to the center

However despite setting the width and height to the same size, the 'circle' still ends up in an oval shape.

The use of flex's align-items: center; also fails to achieve the alignment.

How can I fix the css? Here is a link to the sample code

html

<div class='flex-container'>   
  <div class='arrow-container'>
      <a class='btn-icon' href='#'>
        <span class='square-btn icon icon-back'></span>
      </a>
  </div>
  <div class=title>
        <a href='#'>Untitled
        </a>
  </div>
</div>

css

.flex-container {
  display: flex;
  align-items: center;
}

.icon {
  font-size: 50px;
}

.icon-back::before {
  content: '<';
}

.title {
  margin-left: 5px;
  font-size: 50px;
}

.square-btn {
  height: 50px;
  width: 50px;  
}

.btn-icon {
  padding: 5px;
  border-radius: 50%;
  background-color: gray;
  text-decoration: none;
}

Upvotes: 2

Views: 722

Answers (3)

huhuh
huhuh

Reputation: 31

Grouping classes makes things harder, also, use unicode in css content when it's not alpha-numerical text, try this:

<div class="flex-container">   
<div class="arrow-container">
  <a class="btn-icon" href="#">
    <span class="icon-back"></span>
  </a>
</div>
<div class="title">
    <a href="#">Untitled
    </a>
</div>
</div>

<style type="text/css">

.flex-container {
 display: flex;
 align-items: center;
}


.btn-icon {
 font-size: 50px;
 text-decoration: none;
}

.icon-back::before {
 content: "\003c";
 border-radius: 50%;
 background-color: gray;
 font-size: 40px;
 height:40px;
width:40px;
vertical-align:middle;
display:inline-block;
margin-bottom:5px;
text-align:center;
}

.title {
margin-left: 5px;
font-size: 50px;
}




</style>

Upvotes: 1

marvinhagemeister
marvinhagemeister

Reputation: 3144

This can be done with a single html element and pseude-elements. One neat advantage of making everything depend on the font-size is, that the icon scales proportionally with the font size of the link.

.link {
  font-size: 50px;
  margin-left: 1.1em;
}

.icon {
  position: relative;
}

.icon-back::before {
  content: '<';
  position: absolute;
  left: -.9em;
  display: inline-block;
  z-index: 2;
}

.icon-back::after {
  content: '';
  border-radius: 50%;
  background-color: gray;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  left: -1.1em;
  /* Use translateX() and translateY()
  if you care about old browsers */
  transform: translate3d(0, -45%, 0);
}
<a class="link icon icon-back" href="#">Untitled</a>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371749

This seems to work. No changes to HTML.

.flex-container {
    display: flex;
    align-items: center;
}

.icon {
    font-size: 50px;
}

.icon-back::before {
    content: '<';
}

.title {
    margin-left: 5px;
    font-size: 50px;
}

.square-btn {
    height: 50px;
    width: 50px;
    border-radius: 50%;                    /* new */
    background-color: gray;                /* new */
    display: flex;                         /* new */
    align-items: center;                   /* new; align arrow vertically */
    justify-content: center;               /* new; align arrow horizontally */
}

.btn-icon {
    /* padding: 5px;                        <-- remove */
    /* border-radius: 50%;                  <-- remove */
    /* background-color: gray;              <-- remove */
    text-decoration: none;
}
<div class='flex-container'>
    <div class='arrow-container'>
        <a class='btn-icon' href='#'>
            <span class='square-btn icon icon-back'></span>
        </a>
    </div>
    <div class=title>
        <a href='#'>Untitled
        </a>
    </div>
</div>

jsFiddle

Upvotes: 2

Related Questions