текст / кнопка выравнивания по вертикали в разделе 2 столбца - PullRequest
Новая
       122

текст / кнопка выравнивания по вертикали в разделе 2 столбца

0 голосов
/ 26 февраля 2020

Я пытаюсь выровнять текст по вертикали и кнопку с разделом из 2 столбцов. Чтобы прояснить мою цель, нужно, чтобы текст / кнопка совпали с вертикальной серединой изображения справа.

Я пытался добавить тег vertical-align="middle" к mj-column, но, похоже, это не иметь какой-либо эффект. Однако выравнивание по низу работает.

Ниже приведен пример моего кода и ссылка на редактор mjml с примером, демонстрирующим проблему. 

<mjml>
  <mj-body>
    <mj-section>
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-column width="50%">
        <mj-image src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
      </mj-column>
      <mj-column width="50%" vertical-align="middle">
        <mj-text align="center">Want a kitten? Of course you do! Who doesn't want a fluffy little buddy to keep you company? Go on click the button, you know you want to.</mj-text>
        <mj-button href="https://www.google.com">Get a Kitten</mj-button>
      </mj-column>
      <mj-divider border-color="#F45E43"></mj-divider>
    </mj-section>
  </mj-body>
</mjml>

Ссылка: https://mjml.io/try-it-live/SkblMhXV8

РЕДАКТИРОВАТЬ: Большое спасибо @curveball, примененное решение, как показано ниже: 

<mjml>
  <mj-body>
    <mj-section>
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-column width="50%" vertical-align="middle">
        <mj-image src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
      </mj-column>
      <mj-column width="50%" vertical-align="middle">
        <mj-text align="center">Want a kitten? Of course you do! Who doesn't want a fluffy little buddy to keep you company? Go on click the button, you know you want to.</mj-text>
        <mj-button href="https://www.google.com">Get a Kitten</mj-button>
      </mj-column>
      <mj-divider border-color="#F45E43"></mj-divider>
    </mj-section>
  </mj-body>
</mjml>

Ссылка: https://mjml.io/try-it-live/HJ1v0NSVI

Ответы [ 3 ]

1 голос
/ 26 февраля 2020

Если я правильно понял идею, поставьте vertical-align="middle" на оба mj-column с.

0 голосов
/ 27 февраля 2020

Лучше всего добавить отступы, как показано ниже. Я попробовал это, и это выглядит в значительной степени то, что вам нужно. 

<mjml>
  <mj-body>
    <mj-section>
      <mj-divider border-color="#F45E43"></mj-divider>
      <mj-column width="50%">
        <mj-image src="http://www.online-image-editor.com//styles/2014/images/example_image.png" />
      </mj-column>
      <mj-column width="50%" vertical-align="middle" padding="12% 0">
        <mj-text align="center">Want a kitten? Of course you do! Who doesn't want a fluffy little buddy to keep you company? Go on click the button, you know you want to.</mj-text>
        <mj-button href="https://www.google.com">Get a Kitten</mj-button>
      </mj-column>
      <mj-divider border-color="#F45E43"></mj-divider>
    </mj-section>
  </mj-body>
</mjml>

Дайте мне знать, если это помогло.

0 голосов
/ 26 февраля 2020

Согласно упоминанию @curveball, вы можете достичь этого, добавив вертикальный-выравнивание = "середина" в обоих столбцах.

...