reactjs 柔性盒部件未在顺风方向垂直居中

ohtdti5x 于 2023-01-02 发布在 React

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

我正在Tailwind中制作一个由链接组成的导航栏，但我无法让它们垂直居中：
下面是它的外观：

我尝试过的步骤：
1.第一个月

justify-center
将父项设置为flex-col
这些选项都不起作用。
你如何让链接正好垂直地位于导航栏的中间？
下面是代码：

import React from 'react'
import Logo from '../images/Logo.png'

const Navbar = () => {

    return (
        <div className="flex justify-between items-center bg-gray-900">
            <div className="">
            <img className="w-40 py-2 px-2" src={Logo}></img>
            </div>
            <div className="flex flex-row items-center justify-center">
                <p className="px-4 text-white">About</p>
                <p className="px-4 text-white">Books</p>
                <p className="px-4 text-white">Videos</p>
                <p className="px-4 text-white">Quotes</p>
            </div>
        </div>
    )
}

export default Navbar

reactjs

来源：https://stackoverflow.com/questions/74970078/flexbox-items-not-vertically-centering-in-tailwind

2条答案

按热度按时间

uurv41yg1#

flex类中的div在中心对齐，但问题似乎是第一次使用h-24类时出现的，该类也包含徽标图像。徽标在div的顶部对齐，高度为h-24，比包含菜单项的div高。如果去掉h-24或垂直对齐图像，则它们都垂直对齐。尝试以下操作：

<div class="flex justify-between items-center bg-gray-900">
    <div class="h-24 flex items-center">
      <img class="w-40 py-2 px-2" src="https://via.placeholder.com/150x50"></img>
    </div>
    <div class="flex">
        <p class="px-4 text-white">About</p>
        <p class="px-4 text-white">Books</p>
        <p class="px-4 text-white">Videos</p>
        <p class="px-4 text-white">Quotes</p>
    </div>
</div>

赞(0）回复(0）举报 2023-01-02

cgvd09ve2#

它工作得很好。请重新检查您发送的代码，它是否产生了您在问题中产生的输出。

<div class="flex justify-between items-center bg-gray-900 h-24">
    <div class="">
      <img class="w-40 py-2 px-2" src=""></img>
    </div>
    <div class="flex ">
        <p class="px-4 text-white">About</p>
        <p class="px-4 text-white">Books</p>
        <p class="px-4 text-white">Videos</p>
        <p class="px-4 text-white">Quotes</p>
    </div>
</div>

由以下代码生成的输出：

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs 柔性盒部件未在顺风方向垂直居中

2条答案

相关问题

热门标签

最新问答