Невозможно центрировать форму с помощью Tailwindcss

В настоящее время я работаю над приложением Rails 6 и делаю форму. Я хочу центрировать форму посередине страницы. Я использую Tailwindcss для оформления страницы. Но когда я добавляю with, он не центрируется, если перемещается вправо от страницы.

Невозможно центрировать форму с помощью 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, чтобы предоставить минимальный воспроизводимый пример, демонстрирующий проблему.

showdev 12.07.2019 03:36
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
4
1
9 640
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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></center>. Этот тег используется для центрирования любого блока. @showdev

Showrin Barua 12.07.2019 04:23

Спасибо. Кстати, обратите внимание, что <center> тег устарел.

showdev 12.07.2019 04:25

Да, я знаю. Но вы все еще можете использовать его. Кстати, я дал это решение, потому что мне не удалось запустить ваш код, так как я не знаком с железной дорогой. @showdev

Showrin Barua 12.07.2019 04:28
Ответ принят как подходящий
<div class = "md:flex md:items-center mb-6">

может быть, должно быть

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

Вы находитесь в сетке строк, а не в столбце, поэтому для центрирования используйте выравнивание по центру, а не центр элементов (flex-col).

Без экрана css центр элементов не работает, поэтому в вашем случае «div», который должен быть центрирован, также нуждается в этом

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

Другие вопросы по теме