- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在开发 Rails 6 应用程序并制作表单。我想将表单居中放置在页面中间。我正在使用 Tailwindcss 来设置页面样式。但是,当我添加 with 时,如果移动到页面右侧,它不会居中。
表单如下所示:
<div class="max-w-full">
<%= form_for @post do |f| %>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">
<%= f.label :title, 'Title:' %>
</label>
</div>
<div class="md:w-2/3">
<%= f.text_field :title, class: "bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" %>
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">
<%= f.label :description, 'Description:' %>
</label>
</div>
<div class="md:w-2/3">
<%= f.text_area :description, class: "bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" %>
</div>
</div>
<div class="md:flex md:items-center mb-6">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">
<%= f.label :location, 'Location:' %>
</label>
</div>
<div class="md:w-2/3">
<%= f.text_field :location, class: "bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" %>
</div>
</div>
<div class="md:flex md:items-center mb-6 upload-btn-wrapper">
<div class="md:w-1/3">
<label class="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4" for="inline-full-name">
<%= f.label :image, 'Image:' %>
</label>
</div>
<div class="md:w-2/3" id="file-upload">
<svg xmlns="http://www.w3.org/2000/svg" class="fill-current text-teal-500 inline-block h-12 w-12" viewBox="0 0 22 22"><path d="M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2h-3zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8h-3zM5 19l3-4 2 3 3-4 4 5H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<%= f.file_field :image, as: :file %>
</div>
</div>
<div class="md:flex md:items-center">
<div class="md:w-1/3"></div>
<div class="md:w-2/3">
<%= f.submit "Create", class: "shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" %>
</div>
</div>
<% end %>
</div>
有什么想法吗?
最佳答案
<div class="md:flex md:items-center mb-6">
也许应该是
<div class="md:flex md:justify-center mb-6">
您处于行网格中,而不是列中,因此使用 justify-center 而非 items-center (flex-col) 居中。
关于css - 无法使用 Tailwindcss 居中表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56999151/
我有一张用户表 users +------+ - user_id ... ... - updated_by 据我所知,updated_by 列应该在 user_id 列上引用此表。我不确定,这
我是 SQL 新手,我有 2 个包含这些列的表: table structures__|id|name|nation_id|image| table nations______|id|nation|
我正在使用 codeigniters sql 选择来选择不在一组 id 中的用户。 $this->db->select('fbuid')->where_in('fbuid', $friends); $
找不到具体的答案所以我想问一下。简而言之,我有一个表,它根据存储在我的数据库中的数据从 API 检索信息,我想要做的就是从该表中获取某些列的总数,而不是全部列,以便我可以在其他地方使用它们网站。例如,
这是 phpMyAdmin 为我生成的 SQL 语句: SELECT * FROM `table_name` WHERE 1 可以看到 table_name 被 ` 字符包围。 为什么? 最佳答案 用
我有两个这样的表 我想在这里从 Table1 插入到 Table2。这就是我想要的。 取 MOU = 10。它在同一行中有 num1 和 hour1。我想将它插入到与 num1 同一行与 hour1
我的任务是使用 C++ 编写一个程序,以使用 Gamma 分布计算概率。如果我已经找到函数值,如何将其更改为 Gamma 分布表中的值?我不知道公式。 例如Fg(8;8),在表中为0.5470。而表中
我在查看 HTML 电子邮件时遇到问题,需要格式化 css 以与 HTML 脚本内联。 我有多个表使用的以下 td css。 td.gridtopleft { border-left: solid
我正在使用来自 pip 的最新 sqlalchemy 和最新的 pymssql 连接 mssql 服务器 8.00.2039(2005 年?)困难在于表和列名称是俄语。是否可以用 sqlalchemy
我有一个有趣的问题 - 我需要 JOIN 语句的完全相反。 我有一个名为 invoices 的表和另一个名为 payments 的表。我想按顺序检索没有任何付款的发票,但之后是有付款的行。 发票表有这
我有两个表: 主题:[id, ...] 类别:[主题.id, ...] 我想从表 #1 中选择所有主题,但不包含 #2(类别)中的条目。 任何提示表示赞赏(: 最好的问候 最佳答案 Sachin 已经
MYSQL: 我正在使用表 information_schema.tables 中的 AUTO_INCRMENT 列来获取下一个 id。 如下: SELECT AUTO_INCREMENT FROM
我是一名优秀的程序员,十分优秀!