只是一个快速的问题,为CSS顺风我想在框中的字母是居中的框,有人能告诉我什么改变,使这一点?
目前,框中的文本是左对齐的,但问题是
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>
如果可能的话,你也可以告诉我如何取消隐藏的方块布局(线的形式框)请
1条答案
按热度按时间zujrkrfu1#
有两种方法可以做到这一点。第一个例子你可以使用
text-align: center
和padding-top
属性。如果你用calc()把元素高度的1/2减去1em,这将使文本上下居中。但是,如果元素的大小在将来发生变化,这将无法确保文本垂直居中。一个更简单、更可靠的方法是将元素设置为
display: flex
,并将justify-content
和align-items
设置为居中。x一个一个一个一个x一个一个二个x
至于圆角边框,它似乎是一个CSS类--您可能希望在代码中搜索元素或伪元素上设置的任何
border
属性。