Центрируйте svg по вертикали и горизонтали внутри 2 div без добавления реквизита в родительский div svg - PullRequest
Новая
       15

Центрируйте svg по вертикали и горизонтали внутри 2 div без добавления реквизита в родительский div svg

0 голосов
/ 01 декабря 2018

У меня есть svg внутри div, и мне нужно центрировать svg как по вертикали, так и по горизонтали.Проблема в том, что ширина и высота svg получаются с использованием библиотеки vx-response , поэтому результирующий DOM:

enter image description here

Редактировать: добавлен код 

<div class="w-100 h-70 bg-yellow pa3 ba b--red flex flex-center center-vertical">
  <div style="width: 100%; height: 100%">
    <svg width="41.59375" height="25.208">
      <rect x="0" y="0" width="41.59375" height="25.208" stroke="green"></rect>
    </svg>
  </div>
</div>

Результат:

enter image description here

Не могуудалите середину div, мне это нужно, но я не могу добавить к нему реквизиты.

Что я могу сделать, чтобы решить проблему?

Ответы [ 2 ]

0 голосов
/ 15 декабря 2018

Существует простой трюк для центрирования элемента HTML: 

.w-100{
width:100vw;
height:100vh;
}
.w-100 div{
position:relative;
}
svg{
display:block;
margin:auto;
position:absolute;
top:0; bottom:0; left:0; right:0;
}
<div class="w-100 h-70 bg-yellow pa3 ba b--red flex flex-center center-vertical">
  <div style="width: 100%; height: 100%">
    <svg width="41.59375" height="25.208">
      <rect x="0" y="0" width="41.59375" height="25.208" stroke="green"></rect>
    </svg>
  </div>
</div>

Также вы можете прочитать эту статью: Центрирование в CSS: Полное руководство

0 голосов
/ 01 декабря 2018 
<div class="w-100 h-70 bg-yellow pa3 ba b--red flex flex-center center-vertical">
  <div style="width: 100%; height: 100%">
    <svg width="41.59375" height="25.208">
      <rect x="0" y="0" width="41.59375" height="25.208" stroke="green"></rect>
    </svg>
  </div>
</div>

please use this code below:
--------------------------------

    <div class="w-100 h-70 bg-yellow pa3 ba b--red flex flex-center center-vertical">
        <svg width="41.59375" height="25.208">
          <rect x="0" y="0" width="41.59375" height="25.208" stroke="green"></rect>
        </svg>
    </div>
--------------------------------

.w-100 {
  width: 100px;
}
.h-70 {
  height: 70px;
}
.bg-yellow {
  background:yellow;
}
.flex{
  display:flex;
  flex-wrap:wrap;
}
.flex-center {
  justify-content:center;
}
.center-vertical {
  align-items:center;
}
...