How do you align text with SVG elements using css?

When you want to align text and SVG elements on a webpage, several CSS techniques can help you achieve this. Here are several different approaches:

Using Flexbox

Flexbox is a widely adopted and powerful layout model that can easily align text and SVG elements. To implement it, place the text and SVG elements within the same container and set the container's style to display: flex;. Then, use the align-items and justify-content properties to control alignment along the cross-axis and main axis.

css
.container {
  display: flex;
  align-items: center; /* vertical center */
  justify-content: center; /* horizontal center */
}

html
<div class="container">
  <svg width="100" height="100">...</svg>
  <span>Text content</span>
</div>

Using Grid

CSS Grid is another powerful layout system that can easily align items. Set the container to display: grid; and use align-items and justify-items to control alignment.

css
.container {
  display: grid;
  align-items: center;
  justify-items: center;
}

html
<div class="container">
  <svg width="100" height="100">...</svg>
  <span>Text content</span>
</div>

Using Vertical-align

For inline and inline-block elements, the vertical-align property adjusts vertical alignment. If your SVG and text are inline or inline-block elements, you can apply vertical-align.

css
.svg-inline {
  vertical-align: middle;
}
.text-inline {
  vertical-align: middle;
}

html
<svg class="svg-inline" width="100" height="100">...</svg>
<span class="text-inline">Text content</span>

Using Position

You can manually align text and SVG using positioning properties. This typically involves setting the position of the SVG or text to absolute and then using top, right, bottom, and left for precise placement.

css
.container {
  position: relative;
}
.svg-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

html
<div class="container">
  <svg class="svg-absolute" width="100" height="100">...</svg>
  <span>Text content</span>
</div>

Each method has specific use cases and advantages. The choice depends on your layout requirements and browser compatibility considerations. In real-world projects, you may need to adjust styles based on specific circumstances to achieve optimal results.