不能对中绝对位置(顺风,css)

rdlzhqv9 于 2023-05-02 发布在其他

关注(0)|答案(5)|浏览(92)

背景及问题：

我使用Tailwind CSS和Alpine。js用于一个简单的搜索栏，它有一个使用absolute定位的下拉列表
Codepen在这里：https://codepen.io/jdonline/pen/YzXpbyJ
当我使用relative定位下拉列表时，它的位置完全符合我的要求（但会拉伸页面的其余部分，这是我不希望的）。然而，当我将其更改为absolute时，尽管它不再拉伸页面，但它扩展的下拉列表比预期的要宽。

示例：

您可以通过单击搜索栏右侧的下拉箭头来查看。在第26行将absolute更改为relative时也可以看到差异

问题：

我怎么能，使用顺风。css，定位下拉菜单，使其具有absolute位置，但不会扩展到比搜索栏更宽？

css

来源：https://stackoverflow.com/questions/60362442/cant-center-absolute-position-tailwind-css

5条答案

按热度按时间

rsl1atfo1#

如果只使用顺风，则可以使用以下类

absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2

那就像是

<div class="relative">
    <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"> </div>
<div>

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

5m1hhzi42#

对于Tailwind，试试这个：

absolute m-auto left-0 right-0

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

66bbxpm53#

答案很简单，position:absolute应该有一个父div，position:relative，在你的例子中，relative是为body，你需要给予相对于父div的n行25，
您也可以参考Position CSS

<div x-show.transition.opacity.duration.700ms="open" class="relative" >
    <div class="absolute inset-x-0 shadow-xl bg-white w-3/4 md:w-2/5 mx-auto -mt-1 rounded-lg rounded-t-none">

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

vxbzzdmp4#

我在Tailwind Github的个人资料中找到了我的答案。https://github.com/tailwindlabs/tailwindcss/discussions/1531
添加这个实用程序类，它可以完美地工作：

.inset-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

63lcw9qa5#

您也可以使用grid和place-items-center将item放在中间的e。g的。

<div class="relative">
  <div class="absolute bottom-0 left-0 right-0 top-0 grid place-items-center">
   <!-- Add your content here -->
  </div>
</div>

如果你想把项目放在中间，你也可以用下面的类absolute left-0 right-0 grid place-items-center来做。

<div class="relative">
  <div class="absolute left-0 right-0 grid place-items-center">
   <!-- Add your content here -->
  </div>
</div>

我在操场上创建了一个示例https://play.tailwindcss.com/FPLV9gLqBD

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

我来回答

不能对中绝对位置(顺风,css)

5条答案

相关问题

热门标签

最新问答