centering 相关问题

定心是将某物放置在空间中点的行为。

HStack 元素居中

在我的VStack中我有这个: 虚拟堆栈{ Text("\(match.initiator!) VS \(match.performer!)") .border(颜色.绿色,宽度:1) .font(.system(大小:28,粗细:.bold)) .

回答 1 投票 0

SWiftUI HStack 元素居中

在我的VStack中我有这个: 虚拟堆栈{ Text("\(match.initiator!) VS \(match.performer!)") .border(颜色.绿色,宽度:1) .font(.system(大小:28,粗细:.bold)) .

回答 1 投票 0

如何正确居中选中的单选按钮?

我正在设计一个单选按钮,但在检查时无法使点居中。我尝试使用绝对定位和网格显示将其居中,但没有成功。有人可以告诉我原因吗...

回答 1 投票 0

如何修复Flexbox居中?

在下面的代码中,.rows 没有放置在中心,尽管放置在 .wrapper {display:flex;对齐项目:居中;调整内容:中心}。另外,第三行没有换行到下一行...

回答 2 投票 0

网格容器中的居中元素

我想在具有显示网格的容器的正中心对齐一些元素。但在该元素的正中心存在网格间隙。 所以我想对齐我的元素,两个

回答 1 投票 0

如何将篮球记分牌的得分文本居中?

我正在制作篮球记分板,我想知道如何将记分板容器内的得分文本居中? 虽然主 div 已设置为 Flex 容器,但 p 分数文本位于...

回答 1 投票 0

将鼠标悬停在图像上会出现 2 个元素

我的主要问题是如何使鼠标悬停在图像上时出现 2 个元素。 代码产生: 蓝色 div 覆盖的空间比悬停时两列的一半还要多。我认为这是因为跨度是

回答 1 投票 0

html css 中心,忽略其他元素

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="nav-menu"> <a href="#" class="link"> <p class="nav-item">Home</p> </a> <a href="#" class="link"> <p class="nav-item">Services</p> </a> <a href="#" class="link"> <p class="nav-item">About us</p> </a> <a href="#" class="link"> <i class="fa-solid fa-house"></i> </a> <a href="" class="link"> <p class="sign-in">Login</p> </a> <a href="" class="link"> <p class="sign-up">Sign Up</p> </a> </div> 我想将元素<a href="#" class="link"><i class="fa-solid fa-house"></i></a>居中,忽略其他元素。也就是说,它以父元素的宽度为中心,不会干扰其他元素。我可以使用边距、填充来做到这一点,但我认为这是一种愚蠢的方法,特别是对于自适应 你的意思是这样吗?: a.link:has(> i.fa-solid) { text-align: center; display: block; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="nav-menu"> <a href="#" class="link"> <p class="nav-item">Home</p> </a> <a href="#" class="link"> <p class="nav-item">Services</p> </a> <a href="#" class="link"> <p class="nav-item">About us</p> </a> <a href="#" class="link"> <i class="fa-solid fa-house"></i> </a> <a href="" class="link"> <p class="sign-in">Login</p> </a> <a href="" class="link"> <p class="sign-up">Sign Up</p> </a> </div> 这利用了相对较新的 :has() 伪类 来指定 <a> 元素,该元素具有与 i.fa-solid 选择器匹配的子元素。从那里,它可以简单地将显示更改为 block 并将文本居中。 如果您愿意,您还可以使用 display: inline-block 并将 width 设置为 100%。 请注意,<a> 的宽度随后会增长以匹配父容器的宽度。我假设这不是问题,因为其余 <a> 元素的宽度已经在您的代码中做到了这一点。

回答 1 投票 0

pandas 数据帧上的滚动平均值,其中均值中心基于另一个数据帧的时间

我有一个 df,其数据大约每 15 秒一次 (df1),另一个大约每 5 分钟一次 (df2),如下所列。我想让 df2 的“时间”变量与 clos 相匹配...

回答 1 投票 0

如何在按下按钮时使用 JavaScript 在页面中心、其他元素上方显示大文本单词几秒钟? [已关闭]

我正在开发一个 Web 项目,我需要一个 JavaScript 片段来实现特定功能。 这是我需要的: 本质上,我想在中间显示一个大文本单词几秒钟......

回答 1 投票 0

页面上的表单大小问题

` @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); * { 保证金:20%; 填充:0; 框大小:边框框; 字体系列:“Poppins”,无...

回答 1 投票 0

plotly title_side位置无法正常工作

我对Python绘图是新手,但我试图对不同的人群进行PCA;虽然我仍在处理实际数据,但我在 Python 中的可视化方面遇到的主要问题是

回答 1 投票 0

SDL2/C++:我对在 SDL2 中将视口居中感到困惑

我一直在玩 SDL2,仍在学习中。当尝试将渲染器的视口居中时,似乎将窗口大小和视口大小之间的差异的一半添加到...

回答 1 投票 0

用Flex垂直居中,设置高度,使用Align-items,还是不居中

我已经阅读了这些技术,但一个半小时后我无法弄清楚出了什么问题。我缺职位了吗?为什么文本不垂直居中? .subscribe-btn { 显示:柔性; ...

回答 2 投票 0

CSS 固定div 水平居中?

#菜单 { 位置:固定; 宽度:800px; 背景:rgb(255, 255, 255); /* 后备 */ 背景:rgba(255, 255, 255, 0.8); 顶部边距:30px; } 我知道这个问题是一个我...

回答 10 投票 0

居中<ul>列表

我一直在努力寻找解决这个问题的方法,但到目前为止没有任何效果。我希望我能得到一些帮助。 我正在尝试让一个正常的 列表位于页面中心。我的方式... 我一直在努力寻找解决这个问题的方法,但到目前为止没有任何效果。我希望我能得到一些帮助。 我正在尝试让一个正常的 <ul> 列表位于页面中心。我一直在考虑解决这个问题的方法是将列表嵌入到 div 中,然后简单地使用 margin: 0 auto; 将 div 居中。 但我的问题是,默认情况下,列表似乎采用其父级的 100% 宽度。 那么如何将实际列表宽度调整为与最长列表项一样长呢? 这是我正在尝试做的事情的说明: 或者,或者(我对任一解决方案都可以): 谢谢。 要将宽度调整为最长的项目,请将 display: inline-block; 添加到您的 ul 元素 JSfiddle HTML <h1>title </h1> <li> list item 1 </li> <li> list item item 2 </li> <li> list item item item 3 </li> <li> list item 4 </li> 还有CSS h1, li{ text-align:center; } 您只需将 ul 的显示属性调整为“inline-block”,如下所示: 您还必须将 ul 元素的文本向左对齐,使其不居中。 最后一件事。无序列表有很多填充,可能会偏离居中位置。所以我删除了填充以使其更好地居中。您可能需要调整填充以满足您的需要。 http://jsfiddle.net/k84Rz/ #centeredDiv { width: 100%; margin: 0 auto; text-align: center; } #centeredDiv ul { display: inline-block; text-align: left; padding: 0; } 您可以使用 display: table; + margin: auto 小提琴 ul{ border: 1px solid red; display: table; list-style-type: none; margin: auto; } 要实现类似于第一个插图的效果,请使用 width: fit-contents 来限制列表项的宽度。添加 margin-left: auto 和 margin-right: auto 将项目居中。 li { width: fit-content; margin-left: auto; margin-right: auto; }

回答 5 投票 0

将 div 在 body 中垂直居中?

我尝试将其垂直居中(而不是水平)。另外,我不想指定高度或类似的东西。我尝试添加一个 100% 高度的包装纸和其他东西,但得到了

回答 8 投票 0

为什么我的 col-8 不在网格系统的中间或完全在中间对齐

我一直在从一些视频中学习如何使用bootstrap4,我正在使用网格系统,但由于某种原因它没有在中间对齐,这是我的代码。有什么我可以改变的或者也许

回答 1 投票 0

CSS 翻译和 z 索引

我这里有问题 在html文件的正文中有这样的内容: translate() 问题 我想通过CSS来实现这个形状: HTML+CSS 这就是我的制作方法: div { ...

回答 1 投票 0

徽标在移动视图中居中

这是我的 WordPress 网站,我正在尝试将我的徽标移到中心。 https://sunnongdanusa.com/ 我已经尝试过他们的属性和位置,但它不起作用,需要帮助 请帮我改变...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.