[Vuejs]-I want this text to be aligned with the center of this special character HTML

by

1👍

I usually use flexbox for navbar, so I will explain how you can do it using flexbox:

/* Removes padding and margin from the page */
* {
  padding: 0;
  margin: 0;
}
.navbar {
  display: flex;
  background-color: black;
  color: white;
}
.navbar a {
  text-align: center;
  text-decoration: none;
  padding: 1rem;
  color: white;
  font-size: 20px;
}
.navbar svg {
  width: 20px;
  height: 20px;
  fill: white;  /* Changes the svg icon color to white */
}
<div class="navbar">
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H608zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H608z"/></svg>
  </a>
  <a href="#"><span>TMC</span></a>
</div>

I would suggest making your icon and text of same size.
As I have make my font-size 20px and width, height of svg(icon) 20px.

If you want to have icon of different size and text of different size you can make this change:

/* Removes padding and margin from the page */
* {
  padding: 0;
  margin: 0;
}
.navbar {
  display: flex;
  background-color: black;
  color: white;
  padding: 0;
  margin: 0;
}
.navbar a {
  display: flex;  /* Turns your hyperlinks into a flex item */
  font-size: 20px;
  align-items: center;  /* Aligns flex items to center */
  color: white;
  text-decoration: none;
  overflow: hidden;
  padding: 1rem;
}
.navbar svg {
  width: 40px;
  height: 40px;
  fill: white;  /* Changes the svg icon color to white */
}
<div class="navbar">
    <a href="#" class="icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 1024 1024"><path fill="currentColor" d="M160 448a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V160.064a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32V416a32 32 0 0 1-32 32H608zM160 896a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H160zm448 0a32 32 0 0 1-32-32V608a32 32 0 0 1 32-32h255.936a32 32 0 0 1 32 32v256a32 32 0 0 1-32 32H608z"/></svg>
    </a>
    <a href="#" class="text">TMC</a>
</div>
👤Satyam Rajbhar

Leave a comment