如何在 bulma 的两列中对齐文本？

Question

我有一个包含两栏的页面。在左边我有一个表格，在右边我只有文本。我需要做的是将文本与表单标签对齐。
我尝试通过调整行高、填充和边距来做到这一点，但它在 chrome 中看起来很好，但在其他浏览器中完全关闭。关于如何操作有什么建议吗？
这是它现在的样子：

<head>
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
 <style>
    @media  (min-width: 1000px) and (max-width: 1215px) {
     h1{
         font-size:1.4rem !important;
     }
     p{
         font-size:1.1rem !important;
     }
 }
 @media (min-width: 1216px) and (max-width: 1407px){ 
     h1{
         font-size:1.6rem !important;
     }
     p{
         font-size:1.15rem !important;
     }
 }
 @media(min-width: 1408px) { 
     h1{
         font-size:1.7rem !important;
     }
     p{
         font-size:1.2rem !important;
    }
}
   </style>
  </head>
  <section class="hero is-fullheight">
        <div class="hero-body">
            <div class="container has-text-centered">

                <div class="columns is-8 is-variable ">

<div class="column is-half-desktop is-full-mobile has-text-left">
                    <div id="mc_embed_signup">
                <form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                        <div id="mc_embed_signup_scroll">

                    <div class="mc-field-group field">
                        <label class="label has-text-weight-bold" for="mce-EMAIL" dir="rtl" style="text-align: right;">البريد الإلكتروني <span class="asterisk">*</span>
                    </label>
                    <div class="control">
                        <input dir="auto" type="email" value="" name="EMAIL" class="input is-medium required email" id="mce-EMAIL">
                        </div>
                    </div>

                    <div class="mc-field-group field">
                        <label class="label has-text-weight-bold" for="mce-FNAME" dir="rtl" style="text-align: right;">الاسم الاول</label>
                        <div class="control">
                        <input dir="auto" type="text" value="" name="FNAME" class="input is-medium" id="mce-FNAME">
                        </div>
                    </div>

                    <div class="mc-field-group field">
                        <label class="label has-text-weight-bold" for="mce-LNAME" dir="rtl" style="text-align: right;">اسم العائلة </label>
                        <div class="control">
                        <input dir="auto" type="text" value="" name="LNAME" class="input is-medium" id="mce-LNAME">
                        </div>
    </div>
    
 </div>
</form>
    </div>
</div>
    <div class="column is-half-desktop has-text-right">

<br>
        <p class="has-text-justified" dir="rtl">هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها.  </p><br>
        <p class="has-text-justified"   dir="rtl"> ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر</p><br>
        <p class="has-text-justified"   dir="rtl">خلافاَ للإعتقاد السائد فإن لوريم إيبسوم ليس نصاَ عشوائياً، بل إن له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، .</p><br>
        </div>
</div>
</section>

Answer 1

我会使用 3 列容器来对齐每个字段及其文本。另外，我用 Bulma 的内置助手类.

换掉了你的内联文本对齐样式

<head>
  <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
  <style>
    @media (min-width: 1000px) and (max-width: 1215px) {
      h1 {
        font-size: 1.4rem !important;
      }

      p {
        font-size: 1.1rem !important;
      }
    }

    @media (min-width: 1216px) and (max-width: 1407px) {
      h1 {
        font-size: 1.6rem !important;
      }

      p {
        font-size: 1.15rem !important;
      }
    }

    @media(min-width: 1408px) {
      h1 {
        font-size: 1.7rem !important;
      }

      p {
        font-size: 1.2rem !important;
      }
    }
    
    #mc_embed_signup .mc-field-group {
      width: 100%;
    }
  </style>
</head>

<section class="hero is-fullheight">
  <div class="hero-body">
    <div class="container has-text-centered">
      <div id="mc_embed_signup">
        <form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
          <div id="mc_embed_signup_scroll">
            <div class="columns">
              <div class="column is-6">
                <div class="mc-field-group field">
                  <label class="label has-text-weight-bold has-text-right" for="mce-EMAIL" dir="rtl">البريد الإلكتروني <span class="asterisk">*</span>
                  </label>
                  <div class="control">
                    <input dir="auto" type="email" value="" name="EMAIL" class="input is-medium required email" id="mce-EMAIL">
                  </div>
                </div>
              </div>
              <div class="column is-6 is-flex is-align-items-center">
                <p class="has-text-justified" dir="rtl">هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. </p>
              </div>
            </div>
            <div class="columns">
              <div class="column is-6">
                <div class="mc-field-group field">
                  <label class="label has-text-weight-bold has-text-right" for="mce-FNAME" dir="rtl">الاسم الاول</label>
                  <div class="control">
                    <input dir="auto" type="text" value="" name="FNAME" class="input is-medium" id="mce-FNAME">
                  </div>
                </div>
              </div>
              <div class="column is-6 is-flex is-align-items-center">
                <p class="has-text-justified" dir="rtl"> ويُستخدم في صناعات المطابع ودور النشر. كان لوريم إيبسوم ولايزال المعيار للنص الشكلي منذ القرن الخامس عشر</p>
              </div>
            </div>
            <div class="columns">
              <div class="column is-6">
                <div class="mc-field-group field">
                  <label class="label has-text-weight-bold has-text-right" for="mce-LNAME" dir="rtl">اسم العائلة </label>
                  <div class="control">
                    <input dir="auto" type="text" value="" name="LNAME" class="input is-medium" id="mce-LNAME">
                  </div>
                </div>
              </div>
              <div class="column is-6 is-flex is-align-items-center">
                <p class="has-text-justified" dir="rtl">خلافاَ للإعتقاد السائد فإن لوريم إيبسوم ليس نصاَ عشوائياً، بل إن له جذور في الأدب اللاتيني الكلاسيكي منذ العام 45 قبل الميلاد، .</p>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

如何在 bulma 的两列中对齐文本？

how to align text in two columns in bulma?

html

css

forms

styles

bulma