Как центрировать стол от редактора Гутенберга - PullRequest
Новая
       62

Как центрировать стол от редактора Гутенберга

0 голосов
/ 09 июля 2020

Я создал таблицу с помощью Gutenberg. Файл HTML выглядит так: 

<figure class="wp-block-table alignright">
    <table>
        <tbody>
            <tr>
                <td class="has-text-align-left" data-align="left">text</td>
                <td>text</td>
            </tr>
            <tr>
                <td class="has-text-align-left" data-align="left">text</td>
                <td>text</td>
            </tr>
        </tbody>
    </table>
    <figcaption>my table</figcaption>
</figure>

Затем я отправляю sh HTML в DomPDF для создания PDF-файла, но таблица не выровнена по правому краю.

Можно ли создать стиль CSS для отображения таблицы справа, оставив заголовок по центру?

Я пробовал такой код, но не повезло 

figure {
  border: 1px solid red;
  width: 100%;
  margin: 0px;
  text-align: center;
}

.alignright table {
  border-collapse: collapse;
  margin-left: auto;
}

td {
  border: 1px solid green;
}

оказывать

Спасибо

1 Ответ

0 голосов
/ 09 июля 2020

Вы можете использовать flexbox для выравнивания элементов и flex:1 для регулировки пространства элемента. 

figure {
  border: 1px solid red;
  width: 100%;
  margin: 0px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
}

.alignright figcaption {
  flex:1;
}

td {
  border: 1px solid green;
}
<figure class="wp-block-table alignright">
    <table>
        <tbody>
            <tr>
                <td class="has-text-align-left" data-align="left">text</td>
                <td>text</td>
            </tr>
            <tr>
                <td class="has-text-align-left" data-align="left">text</td>
                <td>text</td>
            </tr>
        </tbody>
    </table>
    <figcaption>my table</figcaption>
</figure>
...