D
D
desuvin2015-06-12 20:56:25
css
desuvin, 2015-06-12 20:56:25

Centering inline svg?

I insert svg like this

<div class="icon"><svg><use xlink:href='images/icons.svg#icon'></use></svg></div>

For .icon I make the size width: 40px; height: 40px; Now how do I get the svg to be centered on the given div? If this is not possible, what other way can the problem be solved?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexander Petrov, 2015-06-12
@dzhiriki

Diva:
text-align: center;

R
Roman Romanovich, 2017-09-20
@morflot

use absolute positioning

.icon{
  position: relative;
  width: 40px;
  height: 40px;
  text-align: center;
}

.icon svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: inline-block;
  width: 25px;
  height: 25px;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question