无法使用 Tailwindcss 使表单居中

Posted 2023-03-07

【中文标题】无法使用 Tailwindcss 使表单居中

【英文标题】：Unable to center form using Tailwindcss

【发布时间】：2019-11-21 18:14:38

【问题描述】：

我目前正在开发一个 Rails 6 应用程序并制作一个表单。我想将表单放在页面中间。我使用 Tailwindcss 来设置页面样式。但是当我添加时，如果移动到页面右侧，它不会居中。

表单如下所示：

<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>

有什么想法吗？

【问题讨论】：

包含已编译的 html 和相关 CSS 以提供演示问题的 minimal, reproducible example 可能会有所帮助。

【参考方案1】：

<div class="md:flex md:items-center mb-6">

也许应该是

<div class="md:flex md:justify-center mb-6">

您在行网格中，而不是列中，因此要使内容居中，请使用 justify-center，而不是 items-center (flex-col)。

【参考方案2】：

如果没有 h-screen 类，items-center 不起作用，所以在你的情况下，必须居中的“div”也需要这个

<div class="md:flex md:h-screen md:items-center mb-6">

【参考方案3】：

我不确定。你可以试试这个。希望它对你有用。

<div class="max-w-full">
      <%= form_for @post do |f| %>
        <center>
          <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>
        </center>
    
         <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）包括提交按钮放在

好的，谢谢。顺便提一下，注意<center> tag is obsolete.

是的，我知道。但是你仍然可以使用它。顺便说一句，我给出了这个解决方案，因为我不熟悉铁路，所以无法运行你的代码。 @showdev