flex box css nav bar 需要文本居中

Question

只是一個關於 CSS tailwind 的快速問題 我希望框中的字母在框中居中，有人可以告訴我要改變什么才能做到這一點嗎？

目前框中的文本左對齊，但問題是

className={` md:px-[30px]  ease-in duration-100 bg-gray-900 transition-colors ${
    fixed
      ? "fixed w-full h-20 shadow-md z-[100]  bg-gray-900 shadow-gray-900  border-b-2 border-[black]"
      : "  w-full h-20 z-[100] "
  } `}
>
  <div className="flex text-white justify-between items-center w-full h-full pl-[10px] px-2 2xl:px-16 ">
    <div className="relative w-[65px] h-[65px] ">
      <Image
        fill
        src="/projects/logo.jpeg"
        className="absolute object-fill rounded-full  "
      />
    </div>
    <div>
      <ul
        className={` ${
          fixed ? "hidden md:flex text-white" : " hidden md:flex"
        } md:hidden lg:flex`}
      >
        <Link href="/#intro" prefetch={false}>
          <li className="ml-10 text-small uppercase hover-border-b">
            Home
          </li>
        </Link>

如果可能的話，你能告訴我如何取消隱藏框布局（形成框的線）嗎

Answer 1

有兩種方法可以做到這一點。 第一個例子你可以使用text-align: center和padding-top屬性。 如果你 calc() 1/2 你的元素的高度減去 1em，這將使文本頂部和底部居中。

text-align: center;
padding-top: calc(50px - 1em);

但是，如果將來元素的大小發生變化，這將無法確保文本垂直居中。 一種更簡單、更可靠的方法是將元素設置為顯示：將justify-content和align-items設置為居中的display: flex 。

 #yourDiv { width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; border: 1px solid blue; }

 <div id="yourDiv">Your text</div>

至於圓角邊框，它看起來是 CSS class - 您可能希望在代碼中搜索在元素或偽元素上設置的任何border屬性。