CODEWITHSUNDEEP
htmlcsssvgvertical-alignment
Hans Felix Ramos
Hans Felix Ramos

Reputation: 4424

vertical center svg and text inline with css

I wanna center vertical an icon and text, both in the same container, I tried to set up svg as inline-block element and use vertical-align: middle but I see its not on the middle. Any simple way to center them? enter image description here

.icon{
    display: inline-block;
    vertical-align: middle;
    height: .9rem;
    margin-right: 0.25rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />

<div class="title">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9.5 17" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M1 1l7.5 7.5-7.5 7.5"></path>
</svg>
  <span>ABOUT ME</span>
</div>

Upvotes: 0

Views: 127

Answers (2)

Danny &#39;365CSI&#39; Engelman
Danny &#39;365CSI&#39; Engelman

Reputation: 21143

No CSS or external dependencies required:

<svg height="140px" fill="none" viewBox="0 0 700 170" stroke-width="20" stroke="currentColor" style="background:pink">
  <g stroke-width="1" >
    <path d="M100 35h800" stroke="green"/>
    <path id="P" d="M100 95h800" stroke="red"/>
    <path d="M100 135h800" stroke="green"/>
  </g>
  <path stroke-linecap="round" stroke-linejoin="round" d="M10 10l75 75-75 75"></path>
  <text stroke-width="2">
    <textPath href="#P" font-size="700%" fill="black" dominant-baseline="middle">
      ABOUT ME
    </textPath>
  </text>
</svg>

Upvotes: 0

LoreMaru
LoreMaru

Reputation: 11

Use flexbox

.icon{
    height: .9rem;
    margin-right: 0.25rem;
}
.title{
display: flex;
align-items:center
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />

<div class="title">
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 9.5 17" stroke-width="2" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M1 1l7.5 7.5-7.5 7.5"></path>
</svg>
  <span>ABOUT ME</span>
</div>

Upvotes: 1

Related Questions