html - 如何在bulma的两列中对齐文本?
问题描述
我有一页两列。在左边我有一个表格,在右边我只有文本。我需要做的是将文本与表单标签对齐。
我尝试通过调整行高和填充和边距来做到这一点,但是它在 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>
解决方案
我会使用 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>
推荐阅读
- c++ - 对 `__imp_glClear' 的未定义引用
- symfony - Easy Admin 不显示关系
- javascript - 如何通过纯 JavaScript 定义第 n 个父元素?
- php - 如何使用 BOOTSTRAP 电子邮件发送 HTML
- java - Spring Webflux Webclient:窃听日志记录问题
- asp.net - 工具栏中的 NavigateUrl
- typescript - Spread only overlapping elements of an object into a new one with TypeScript
- msbuild - 构建步骤后在 Cake 脚本中公开 MSBuild 属性
- c - READELF - 如何在符号名称后添加“@GLIBX_XXX”
- mysql - 无法删除 myphpadmin mysql 表中的字段(在奖励空间免费托管上)