Как разместить формулу MathML по центру?

Формула, созданная с помощью MathML, по умолчанию является строчным элементом, что позволяет вставлять её посреди текста. Для отображения формулы по центру, к элементу <math> следует добавить атрибут display со значением block.

Код примера скопирован в буфер
<math display="block">
 <mi>sin</mi>
 <mn>2</mn>
 <mi>α</mi>
 <mo>=</mo>
 <mn>2</mn>
 <mi>sin</mi>
 <mi>α</mi>
 <mi>cos</mi>
 <mi>α</mi>
</math>

Если нет возможности добавить атрибут display, то допустимо воспользоваться стилями. Для этого в CSS к селектору math применяем свойство display со значением block math.

math {
 display: block math; /* Выравниваем по центру */
}

Браузеры Firefox и Safari не поддерживают значение math для свойства display, поэтому специально для них добавим ещё одно свойство display со значением block, а также свойство text-align для выравнивания по центру.

math {
 display: block; /* Для Firefox и Safari */
 text-align: center; /* Выравниваем по центру */
 
 display: block math;
}

Таким образом, браузер Firefox проигнорирует значение math для display, а Chrome перепишет значение block на block math, поскольку оно идёт ниже.

Формулы MathML могут отображаться в двух вариантах: обычном и компактном.

Обычный вид Компактный вид
∑ n=1 ∞ 1 3 n ∑ n=1 ∞ 1 3 n

При компактном виде формула выглядит чуть меньше, чтобы размещаться посередине текста и не сильно раздвигать строку. За вид формулы отвечает свойство math-style. Значение compact делает формулу компактной, а normal обычной. Для отображения формулы не в компактном, а обычном виде, добавим к стилю свойство math-style со значением normal.

Окончательный стиль для отображения формулы по центру показан в примере 1.

Пример 1. Формула по центру

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Формула</title>
  <style>
   .formula {
    display: block; /* Для Firefox и Safari */
    text-align: center;
    display: block math; /* Выравниваем по центру */
    math-style: normal; /* Обычный вид */
   }
  </style>
 </head>
 <body>
  <p>Формула двойного угла:</p>
  <math class="formula">
   <mi>sin</mi>
   <mn>2</mn>
   <mi>α</mi>
   <mo>=</mo>
   <mn>2</mn>
   <mi>sin</mi>
   <mi>α</mi>
   <mi>cos</mi>
   <mi>α</mi>
  </math>
 </body>
</html>
MathML