How do I align the circle (in pesudo class :after) and text vertically middle in this case?

user_1661640 0
Viewed 63

Here is the code:

I've tried many times and searched my answers but none works.

.tag-wrap a {
    font-size: .5em;
    text-decoration: none;
    padding: 5px 11px 5px 8px;
    display: inline-block;
    color: #fff;
    background: #333;
    margin: 3px;
    border-radius: 99px 0 0 99px;
    box-shadow: 0 1px 0 0 rgb(38 38 38 / 10%);
    border: 1px solid #ddd;
    font-family:arial;
}

.tag-wrap a:before {
    content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E);
    margin-right:4px;
}
<div class="tag-wrap"><a href="#" >Label One</a><a href="#">Label Two</a></div>

css
5 Answers

You could take a modern approach by using a flexbox or grid to vertically center the text.

And if you want the elements next to each other just use inline-flex or inline-grid

.tag-wrap a {
    max-width: 10em;
    font-size: .5em;
    text-decoration: none;
    padding: 5px 11px 5px 8px;
    display: flex;
    align-items:center;
    color: #fff;
    background: #333;
    margin: 3px;
    border-radius: 99px 0 0 99px;
    box-shadow: 0 1px 0 0 rgb(38 38 38 / 10%);
    border: 1px solid #ddd;
    font-family:arial;
}

.tag-wrap a:before {
    content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E);
    margin-right:4px;
}
<div class="tag-wrap"><a href="#" >Label One</a><a href="#">Label Two</a></div>

user_158234780

add vertical-align: middle to both the circle and the anchor.

.tag-wrap a {
    font-size: .5em;
    text-decoration: none;
    padding: 5px 11px 5px 8px;
    display: inline-block;
    color: #fff;
    background: #333;
    margin: 3px;
    border-radius: 99px 0 0 99px;
    box-shadow: 0 1px 0 0 rgb(38 38 38 / 10%);
    border: 1px solid #ddd;
    font-family:arial;
  vertical-align: middle;
  line-height: 1.5;
}

.tag-wrap a::before {
  vertical-align: middle;
    content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E);
    margin-right:4px;
    font-size: 0;
}
<div class="tag-wrap"><a href="#" >Label One</a><a href="#">jelly gap</a></div>

user_78920140

If you have no problem with a verbose but more accommodating answer!! Changing the font size of the text changes the dimension of pseudo-class accordingly. 

span{
  font-size: 50px;
  display: inline-block;
  padding: 0.5em 1em 0.5em 2em;
  position: relative;
  margin-block: 1em;
}

span::before{
  position: absolute;
  width: 100%;
  height:100%;
  content:'';
  background:orchid;
  z-index:-1;
  top:0;
  left:0;
  border-radius: 2em 0 0 2em;
}

span::after{
  content:'';
  position: absolute;
  top: 50%;
  right: calc(100% - 1.5em);
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: white; 
}
<span>Label One</span>

user_169152920

You can easily handle this problem with FlexBox. You do not need to use padding or anything else to place elements to the center. Just add the below styles to your code:

.tag-wrap a {
    display: flex;
    height: 26px;
    padding: 0 11px 0 8px;
    align-items: center;
    width: fit-content;
}

.tag-wrap a:before {
    line-height: 0;
}
<div class="tag-wrap"><a href="#" >Label One</a><a href="#">Label Two</a></div>

user_58292930

You can add those lines with display:flex property and you want to center the whole text and circle to the center of that div you also should add justify-content:center

.tag-wrap a {
    max-width: 10em;
    font-size: .5em;
    text-decoration: none;
    padding: 5px 11px 5px 8px;
    display: flex;
    align-items:center;
    color: white;
    background: #333;
    margin: 3px;
    border-radius: 99px 0 0 99px;
    box-shadow: 0 1px 0 0 rgb(38 38 38 / 10%);
    border: 1px solid #ddd;
    font-family:arial;
}

.tag-wrap a:before {
    content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20viewBox%3D%220%200%2020%2020%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%2210%22%20fill%3D%22white%22%3E%3C%2Fcircle%3E%3C%2Fsvg%3E);
    margin-right:4px;
}
<div class="tag-wrap"><a href="#" >Label One</a><a href="#">Label Two</a></div>

user_168704820
Related