32
4
I have a problem with vertically aligning text using flex in my web application using Tailwind. Here is part of my code:
我在我的Web应用程序中使用TailWind使用Flex垂直对齐文本时遇到了问题。以下是我的部分代码：
个人中心
文章发布
退出<div className="flex flex-col gap-4">
<div className="font-bebas bg-font-color ">
<h1 className="text-font-color text-4xl flex flex-row gap-2 items-end">nothing but
<p className="text-secondary text-5xl self-end">the best</p></h1>
</div>
<h2 className="text-secondary font-nautigal text-5xl">Frank Sinatra</h2>
</div>
My goal is to have the text "nothing but" and "the best" in the same line. How can I achieve this?
我的目标是把“只有”和“最好的”这两个字放在同一行。我怎样才能做到这一点呢？
They are already in the same line. What am i missing?
他们已经在同一条线上了。我遗漏了什么？
@M.ÇağlarTUFAN You can notice that THE BEST is little bit higher, so it does look weird
@M.UnağlarTUFAN你可以注意到最好的稍微高一点，所以它看起来确实很奇怪
It's just due to selection highlight, but the texts are actually on the same base line. If you want selection to looks the same height, you can set both of them a same value of line-height CSS property. This line-height will make both texts to occupy same amount of height within their parent element.
这只是因为选择突出显示，但文本实际上在同一基线上。如果希望所选内容看起来高度相同，可以将它们设置为相同的行高css属性值。此行高将使两个文本在其父元素中占据相同的高度。
@M.ÇağlarTUFAN it is good an idea, setted line-heigt as leading-3 for both texts, but THE BEST text looks little bit cutted of. See imgur.com/1i8c2nY
@M.？ğlarTUFAN这是一个很好的想法，将两个文本的行高设置为前导3，但最好的文本看起来有点被剪掉了。参见imgur.com/1i8c2nY
It's probably caused by the different font-sizes on texts. When you set leading-3 on both texts with different font sizes, the class sets line-height: .75rem for texts. It's measured in rems, so calculated line-heights are different. Could you try setting a fixed line-height value on both like leading-[9px]?
这可能是由于文本的字体大小不同造成的。当您在两个字体大小不同的文本上设置LEADING-3时，类将为文本设置行高：0.75rem。它是用雷姆测量的，所以计算的线高度是不同的。您是否可以尝试设置一个固定的行高值，如LEADING-[9px]？
It does seems to me like the proper way, but it works. I had to set bigger text line-heigt to 45px and the smaller one to 15px.
在我看来，这确实是正确的方式，但它奏效了。我不得不将较大的文本行高设置为45px，将较小的文本行高设置为15px。
<h2 className="text-font-color text-7xl
leading-[15px]">nothing but
</h2>
<h1 className="text-secondary text-9xl leading-[45px] ">the best</h1>
<span> instead of <p><span>hope this will work as you expected.
希望这将工作如你所料。
<div className="flex flex-col gap-4">
<div className="font-bebas bg-font-color ">
<h1 className="text-font-color text-4xl flex items-center flex-row gap-2">
<span>nothing but</span>
<span className="text-secondary text-5xl self-end">the best</span>
</h1>
</div>
<h2 className="text-secondary font-nautigal text-5xl">Frank Sinatra</h2>
</div>
Good an idea, but it works only for text-4xl and text-5xl . Not for bigger font-size
好主意，但它只适用于Text-4XL和Text-5XL。不适用于更大的字体
32
4
0
我知道这类问题已经得到解答，但就我而言，我已经尝试了所有配置，但仍然不起作用。我需要对我的配置有一个新的看法(我确信我错过了一些东西)。两个附加程序都会记录所有级别 我想将所有包的信息 >= 记录到控
我正在对 Windows 移动设备上的代码性能进行一些基准测试，并注意到某些算法在某些主机上的表现明显更好，而在其他主机上则明显更差。当然，考虑到时钟速度的差异。 供引用的统计数据(所有结果均由同一个
我有一个程序可以计算多边形的面积和周长。程序还会确认面积和周长的计算结果是否与预期结果相同。 我不明白发生了什么，但确认面积和周长是否与预期相同的验证部分无法正常工作。 例如，我现在测试并在所有情况下
Codepen :(对于那些想直接进入的人来说，这是一个代码笔。在 Chrome 和 IE 中尝试一下，看看结果的不同) 我正在尝试使用 css3 转换/过渡，因为它们比 jquery 效果更流畅。
我有几个不同的正则表达式要在给定文本中匹配和替换。 regex1 :如果文本包含单词“Founder”，则将所有文本替换为首席执行官 正则表达式2:如果文本包含9位数字，则将其替换为NUM 我尝试使用
我编写了多线程应用程序，它从每个线程的数据库连接到一些电子邮件帐户。我知道 JavaMail 没有任何选项可以使用 SOCKS5 进行连接，因此我决定通过 System.setProperty 方法使
如您所见，这是我当前 Storyboard的不同设备预览。底部的透明绿色被另一个 View Controller 占用，但需要为每个不同的尺寸类固定间距。我尝试将 Storyboard 中的宽度和高度
我正在创建一个游戏，我需要能够改变玩家 Sprite 的速度。我认为最好的选择是通过重力影响 Sprite 。为了给用户运动的感觉，我希望背景以完全相同的速度向相反的方向移动。 我怎样才能给背景一个不
我正在查看BTrees库并注意到有多个 TreeSet (和其他)类，例如 BTrees.IOBTree.TreeSet BTrees.OOBTree.TreeSet BTrees.LFBTree.T
我有一个小型 C++ 库，必须为 armeabi 和 armeabi7a 编译。我还有一个非常大的 c++ 库，只需要为 armeabi 编译。现在正在为两种架构编译它们(使用 NDK)，但这使我的
我需要根据站点的当前部分稍微更改主题。 似乎 MuiThemeProvider 只在加载时设置 muiTheme；但需要在 props 变化时更新。 如何做到这一点？ 最佳答案 您可以尝试将主题放在包
如何创建两个每个都有自己的计数器的 lSTListing 环境？ 如果我使用例如 \lstnewenvironment{algorithm}[2]{ \renewcommand\lstlist
我想使用 Travis-CI 和 Github 基于分支设置部署。 IE。 - 如果我们从 develop 构建- 然后执行 /deploy.rb使用 DEV 环境主机名，如果 master - 然后
我有一个带有数据验证的 WPF MVVM 数据表单窗口。很多控件都是文本框。目前，数据绑定(bind)触发器设置为默认值，即。 e.失去焦点。这意味着仅在可能完全填写字段时才对其进行验证。所以当删除一
我有许多应用程序的内容页面，并最终为每个内容页面编写了很多 View 模型。例如。如果我有一个包含项目组的列表，我将有一个 ShowAllViewModel并绑定(bind)到内容页面和列表中单个项目
我有一个通用 View 和 4 个其他 View 。我在通用 View 中使用 Bootstrap 选项卡(导航选项卡)。我希望其他 4 个 View 成为通用 View 中 4 个选项卡的内容。由于
我希望针对 Maven 发布插件的不同目标有不同的配置选项。故事是这样的: 我正在将 Git 用于 SCM。我希望release:prepare插件在本地完成所有操作，并让release:perfor
我正在为一个项目使用AbstractTableModel制作一个自定义TableModel，并且我需要找到一种方法让复选框显示在某些行上，而不是其他行上。我已经实现了 getColumn 方法，但我希
摘自《Javascript 忍者的 secret 》一书: EVENTS ARE ASYNCHRONOUS Events, when they happen, can occur at unpredi
我正在尝试配置我的第一个 GWT 记录器，到目前为止，我已经将日志消息打印到我的 JS 控制台(FF 的 Firebug): 最终，我希望非SEVERE 消息转到consoleHa
我是一名优秀的程序员,十分优秀！