Как поступить с центровкой элементов?

108
23 марта 2021, 04:50

В общем ситуация как обычно ...

Решил уже до конца разобраться с центровкой элементов программно

Есть text и некий rect я хочу именно программным способом вычислить центр этого rect и поставить точно в центр без смещения text

Какие есть способы для этого ?

Попытка из головы :

svg { 
  border: 1px solid red; 
} 
 
#rect { 
  width: 200px; 
  height: 100px; 
  fill: #fff; 
  stroke: blue; 
  stroke-width: 1px; 
} 
 
#text { 
  font-size: 32px; 
  font-weight: 900; 
  font-family: sans-serif; 
  fill: #000; 
}
<svg width="300" height="500"> 
  <rect id="rect" x="50" y="50" ></rect> 
  <text id="text" x="130" y="105">Text</text> 
</svg>

Answer 1

  1. Нужна центровка:

    alignment-baseline: middle;
text-anchor: middle;

  2. getBBox();

let box = rect.getBBox(); 
text.setAttribute('x', box.x + box.width/2); 
text.setAttribute('y', box.y + box.height/2);
svg { 
  border: 1px solid red; 
} 
 
#rect { 
  fill: #fff; 
  stroke: blue; 
  stroke-width: 1px; 
} 
 
#text { 
  font-size: 32px; 
  font-weight: 900; 
  font-family: sans-serif; 
  fill: #000; 
  alignment-baseline: middle; 
  text-anchor: middle; 
}
<svg width="300" height="500"> 
  <rect id="rect" x="50" y="50" width="200" height="200"></rect> 
  <text id="text">Text</text> 
</svg>

READ ALSO
Как исправить ошибку в JS? [закрыт]
javascript

Как исправить ошибку в JS? [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

 115
Какая разница между `export default foo` и `export { foo as default }`?
javascript

Какая разница между `export default foo` и `export { foo as default }`?

Всем привет

 108
Скролл вложенных в таблицу столбцов
javascript

Скролл вложенных в таблицу столбцов

Есть ли возможность в рамках одной таблицы с помощью стилей и/или JS создать таблицу со вложенными столбцами, которые возможно скролить в рамках...

 82
Указатель класса самого на себя
c++

Указатель класса самого на себя

Не до конца могу уловить плюс от конструкций типа:

 109