React-顺风CSS应用：div内的文本未放置在屏幕中间

r1wp621o 于 2022-12-27 发布在 React

关注(0)|答案(2)|浏览(122)

最近我一直在努力正确放置React-Tailwind应用程序中位于屏幕中间的标题。如下图所示，文本被放置在稍微靠左的位置，而不是正中间。x1c 0d1x
显示图片中显示的元素的代码如下所示：'

<div className="max-w-[800px] mt-[-96px] w-full h-screen mx-auto flex flex-col justify-center items-center">
            <div className="text-[#00df9a] md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-center">
                <h1>Find everything about your favorite</h1>
                <Typed 
                    strings = {["Artists", "Songs", "Genre"]} 
                    typedSpeed = {250} 
                    backSpeed = {140} 
                    loop 
                />
            </div>
            <UserContext.Provider value= {providerValue}>
                <SearchBar />
                <ResultList />
            </UserContext.Provider>
        </div>

我是否在第一个或第二个div的className中遗漏了一些内容？非常感谢

css

来源：https://stackoverflow.com/questions/74924161/react-tailwind-css-application-text-within-a-div-not-being-placed-in-the-middle

2条答案

按热度按时间

vuktfyat1#

这完美地将内容居中到中间。

<div class="mx-auto mt-[-96px] flex h-screen w-full max-w-[800px] flex-col items-center justify-center">
  <div class="text-center text-4xl font-bold text-[#00df9a] sm:text-6xl md:py-6 md:text-7xl">
    <h1>Find everything about your favorite</h1>
  </div>
</div>

输出：

赞(0）回复(0）举报 2022-12-27

2mbi3lxu2#

验证码：

<div className="max-w-800 mt-96 w-full h-screen mx-auto flex flex-col justify-center items-center">
  <div className="text-#00df9a md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-center">
    <h1>Find everything about your favorite</h1>
    <Typed 
      strings={["Artists", "Songs", "Genre"]} 
      typedSpeed={250} 
      backSpeed={140} 
      loop 
    />
  </div>
  <UserContext.Provider value={providerValue}>
    <SearchBar />
    <ResultList />
  </UserContext.Provider>
</div>

赞(0）回复(0）举报 2022-12-27

我来回答

React-顺风CSS应用：div内的文本未放置在屏幕中间

2条答案

相关问题

热门标签

最新问答