英文:
Tailwind align text left but centered in div
问题
<div class="px-10 pb-20 md:text-center"> <!-- TAILWIND -->
<div class="px-10 pb-20 md:items-center"> <!-- TAILWIND -->
<div class="px-10 pb-20 md:max-w-2xl md:inline-block md:text-left"> <!-- TAILWIND -->
<div class="px-10 pb-20 place-content-center"> <!-- TAILWIND -->
<div class="px-10 pb-20 max-w-md mx-auto"> <!-- TAILWIND -->
<div class="px-10 pb-20 mx-auto md:text-left max-w-md md:max-w-non"> <!-- TAILWIND -->
英文:
I'm starting out with Tailwind and Rails to build a blog page.
I have left-aligned my text on all screen sizes (sm-xl). However, on screensizes >md I want the text to be left-alight and positioned in the center of the page. (Not md:text-center as this center-aligns the text.)
application.html.erb code:
<body class="mx-auto"> **TAILWIND**
<div>
<%= render 'shared/navbar' %>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<div class="px-10 pb-20 md:max-w-2xl "> **TAILWIND**
<%= yield %>
</div>
</div>
<%= render 'shared/footer' %>
</body>
</html>
This is how the page renders on small screens:
This is how the page renders on large screens:
I have tried these combinations and none have worked:
- div class="px-10 pb-20 md:text-center"
- div class="px-10 pb-20 md:items-center"
- div class="px-10 pb-20 md:max-w-2xl md:inline-block md:text-left"
- div class="px-10 pb-20 place-content-center"
- div class="px-10 pb-20 max-w-md mx-auto"
- div class="px-10 pb-20 mx-auto md:text-left max-w-md md:max-w-non"
Thanks in advance.
答案1
得分: 1
在它们周围加一个flex包装器，并在其上应用md:justify-center。
英文:
Put a flex wrapper around them and apply md:justify-center on it.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论