alignment 相关问题

垂直对齐离子卡的中心 [IONIC]

我正在开发一个登录表单，因此在我的中我有一个（用作登录表单的容器），我想将其垂直居中。我尝试了不同的方法...

文本未在行中垂直居中

文字下方的空间似乎比上方更大。 我该如何用 CSS 解决这个问题？

如何在不更改内容并保持其左对齐的情况下使表单居中？

计算机科学课程中输入部分的最后一个问题要求我将其设计为现有网站的风格。这涉及到以形式为中心，但不以内容为中心。我有一张表格...

用JS过滤后对齐卡片

当我用JS过滤卡片并隐藏其中一些卡片时，我希望剩余的卡片取代它们的位置。 当我用JS过滤卡片并隐藏其中一些卡片时，我希望剩余的卡片取代它们的位置。 <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-10 cards"> <?php foreach($books as $book):?> <a href="/Books/book.php?id=<?php echo $book['id']; ?>"> <div class="card hover:scale-110 transition duration-500 cursor-pointer"> <img src="<?php echo $book['img_url']; ?>" alt="Book Image" class="mb-2 rounded-md w- full h-80 object-fill"> <h2 class="font-bold mb-2 ml-2"> <?php echo $book['book_title'] ?></h2> <p class="pb-5 ml-2"> <?php echo $book['author_name']?></p> <div class="badge"> <svg class="w-5 inline-block h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" /> </svg> <span> <?php echo $book['category_title'] ?></span> </div> </div> </a> <?php endforeach; ?> </div> const buttons = document.querySelectorAll(".btn-category"); const cards = document.querySelectorAll(".card"); const showAll = document.querySelector(".show-all"); buttons.forEach((button) => { button.addEventListener("click", function () { showAll.classList.remove("bg-white", "text-green-600", "border", "btn"); button.classList.add("bg-white", "text-green-600", "border", "btn"); category = button.getAttribute("data-category").toUpperCase(); console.log(category); cards.forEach((card) => { const cardCategory = card.querySelector(".badge span").innerText; if (category === "All" || cardCategory === category) { card.style.display = "block"; } else { card.style.display = "none"; } }); }); }); 我尝试将显示更改为内联块，但没有成功。我可能会使用 flex 方法，但会使用 grid 方法。如您所见，我在 index.php 文件中使用了 tailwind。对于这个项目我只能使用JS，jQuery，不能使用React。 不应该是这样的： 所有卡都应该是这样的： 您希望在 display: none 元素的父级 <a> 元素上切换 .card，而不是 .card 元素本身。这是因为当其子元素 <a> 设置为 .card 时，display: none 元素仍然“存在”并占用网格空间。 因此，您可以将 JavaScript 稍微修改为： cards.forEach((card) => { const cardCategory = card.querySelector(".badge span").innerText; if (category === "All" || cardCategory === category) { card.parentElement.style.display = ""; } else { card.parentElement.style.display = "none"; } });

QGridLayout 中小部件的不同对齐方式

以下代码（Qt 5，与 Qt 4.8 的行为相同）使用 QGridLayout 在 QScrollArea 的上方和左侧添加小部件（稍后用作一种标题）： #包括 #

最大公共前景像素的图像翻译优化算法

我正在寻找一种算法来有效地确定一个 2D 图像到另一个 2D 图像的最佳平移（仅限于 x 和 y 轴，无旋转）。目标是找到最大公共像素，

不使用布局的 QML 基线对齐

我想使用基线对齐锚点，而不使用任何花哨的 RowLayouts 等。我想使用标签的底部锚点与文本编辑的基线锚定。我想，

Amchart 4 Legend 阿拉伯语未正确显示

我想从右侧启动图例标记，我已经使用了这三个属性。 图例.reverseOrder = true; Chart.legend.itemContainers.template.reverseOrder = true;chart.rtl = t...

使用 CSS Flexbox 时我的图像没有连续对齐？

我实际上正在遵循教程，我的代码模仿了该讲师的确切代码。在教练的网站上，他的图像完美对齐，而我的图像则不然。这里发生了什么事？ CSS 呃...

如何正确格式化 python 中的控制台输出？

来自 colorama import Fore 进口平台 导入发行版 导入时间 导入操作系统 ＃ 功能 def get_uptime(): 返回 os.popen('uptime -p').read()[:-1] def get_os(): 返回 platform.system()...

Pandas - Dataframe：对同一列中的相同值进行排序，如果行中的值不存在，则放置 NaN（或 0）

我构建了一个数据框，该数据框已经从数据集中将不同通道的所有相同频率分组在一起。现在，在每一行中，我首先有我的频率，然后是它发生的通道....

h：输出文本值以居中对齐

我试图将 div 标签包围的 h:outputText 标签的值居中对齐。我发现示例 1) 满足了我的目标，但是我希望使用 css 类来满足需要，但我已经......

使用 Flexbox 显示的项目的内边距相等

我有一个项目列表，我想显示其中 6 个在顶部，7 个在底部。然而，较长单词的项目并未集中对齐。 这就是目前的样子。 正如你...

Flutter 在行中的卡片中将 topRight 对齐不起作用，请继续粘在左侧

我有一个卡片小部件，它围绕着一些对齐方式。居中和左下对齐是有效的，但我也想在右上角显示一些东西，它一直粘在左边。 图像： 代码...

ToggleButtonGroup Material Ui - 如何排列 2 x 2 2 行 2 列

如果我在切换按钮中使用网格，则 OnChange 事件不起作用 使用网格或堆栈事件效果很好 我如何排列 2 x 2 按钮 我在 Material ui 网站上看不到任何关于此的示例...

如何在 CSS 中正确实现 #ID:hover{} 且不会与其他 HTML 元素错位？

所以，我第一次尝试使用元素，到目前为止我还没有遇到任何问题。但现在，我想要一个 div 框，其中有多个 链接，如 ... 所以，我第一次尝试使用 <div> 元素，到目前为止我还没有遇到任何问题。但现在，我想要一个 div 框，它有多个 <a> 链接，因为 <img> 的目标是拥有一个用作动画的 #Image:hover 函数。 实施也很顺利，但现在我遇到了我的问题，我没有发现任何具体的问题......每当我将鼠标悬停时，img 元素就会与其他 img 错位。现在我想知道我可以实施什么，这样它就不会错位...... 我有这个 CSS 部分： #Icons { margin: 8px 0 0; padding: 0; display: block; background-color: transparent; min-height: 43px; height: 43px; max-height: 43px; } #Image { margin: 0; padding: 0; width: 40px; height: 40px; } #Image:hover { margin: 0; padding: 0; width: 43px; height: 43px; } #Media { margin: 0 4px; display: inline-block; min-width: 43px; width: 43px; max-width: 43px; min-height: 43px; height: 43px; max-height: 43px; } 还有这个 HTML 部分： <p id="HeaderTwo">Reachable under</p> <div id="Icons"> <a id="Media" href="#"><img id="Image" src="../img/discord.png" /></a> <a id="Media" href="#"><img id="Image" src="../img/gmail.png" /></a> <a id="Media" href="#"><img id="Image" src="../img/telegram.png" /></a> <a id="Media" href="#"><img id="Image" src="../img/youtube.png" /></a> </div> 我尝试将以下内容包含到一些 CSS 元素中，希望它能充当盒子限制器或其他东西。类似，这样就不会/不应该发生错位。 min-width: 43px; width: 43px; max-width: 43px; min-height: 43px; height: 43px; max-height: 43px; 要避免元素调整布局大小，请使用 transform scale。 现在，除了您的具体问题外，请考虑以下修复： 避免使用 ID 进行样式设置（而且 ID 必须是唯一的） 悬停动画是告诉用户图像是可点击的，所以触发器应该在<a>标签上 .image { width: 40px; height: 40px; transition: transform .3s; will-change: transform; } .media { display: inline-block; margin: 0 4px; } .media:hover .image { transform: scale(1.075); } <div class="icons"> <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?1" /></a> <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?2" /></a> <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?3" /></a> <a href="#" class="media"><img class="image" src="https://source.unsplash.com/random?4" /></a> </div>

如何在一张图中对齐两个 x 轴的值

我正在尝试使用 matplotlib 中的 twiny() 从由这些数据块组成的 XML 文件中绘制具有两个 x 轴的曲线： 2018-11-10T22:27:06.500003&...

使 HTML/CSS 项目粘贴/对齐到行的左右边缘？

我想要 一个较长但不是非常长的 标题，像往常一样，我希望它与页面的左边缘对齐；进而， 我想要一个普通的单词（所以作为第一个近似值，我已经输入了... 我想拥有 一个较长但不是非常长的<h1>标题，像往常一样，我希望它与页面的左边缘对齐；然后， 我想要一个普通的单词（所以作为第一个近似值，我把它作为<span>）放在同一行上，但我希望它右对齐（即，它粘在页面的右边缘；所以本质上，它占据它所占用的宽度，行的其余部分由标题填充）；最后 下面我想要一段。比如： <div id="dhead"> <h1 id="htitle">Some longish title</h1> <span id="extra">Extra</span> <div> <p> Hello. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat blandit ultrices. Nullam tincidunt eu tortor vitae pretium. Vestibulum nec ultrices ipsum. Nulla tempus vitae eros varius rutrum. Sed condimentum convallis dui id interdum ... </p> ...除了上面的例子之外，标题和“额外”一词甚至不在同一行。 我尝试了以下弹性方法，如 CSS 两个彼此相邻的 div ： #dhead { display: flex; } #extra { /* width: 200px; // don't want to set width of this explicitly; it should take the width of its content, the word) */ } #htitle { flex: 1; /* Grow to rest of container (?) */ } <div id="dhead"> <h1 id="htitle">Some longish title</h1> <span id="extra">Extra</span> <div> <p> Hello. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat blandit ultrices. Nullam tincidunt eu tortor vitae pretium. Vestibulum nec ultrices ipsum. Nulla tempus vitae eros varius rutrum. Sed condimentum convallis dui id interdum ... </p> ...现在更糟了——实际上，很糟糕——因为现在标题和单词 AND 段落位于同一行（？！） 那么，如何将标题（向左）和单词（向右）对齐在同一行，并在下面有一个段落？我可以继续使用 <h1>、<span> 和 <p>，还是必须用样式化的 <div> 替换它们才能实现这样的效果？ 您只需使用flexbox即可达到您的目的。 #dhead { display: flex; justify-content: space-between; align-items: center; } #htitle { flex-grow: 1; } <div id="dhead"> <h1 id="htitle">Some longish title</h1> <span id="extra">Extra</span> </div> <p> Hello. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis consequat blandit ultrices. Nullam tincidunt eu tortor vitae pretium. Vestibulum nec ultrices ipsum. Nulla tempus vitae eros varius rutrum. Sed condimentum convallis dui id interdum ... </p>

如何使用 TailwindCSS 将行与换行文本居中对齐？

当行项目中的文本开始变长并换行时，我在使用 TailwindCSS 来对齐弹性行中的某些元素时遇到问题。 这是我当前的实现： 当行项目中的文本开始变长并换行时，我在使用 TailwindCSS 来对齐 flex-row 中的某些元素时遇到问题。 这是我当前的实现： <div class="border-1 p-2 flex w-[250px] flex-col items-center rounded border border-solid border-gray-300"> <div class="flex flex-row"> <div>UUID</div> <div class="ml-2"> Text </div> </div> <div class="mt-2"> 2023-10-23 </div> </div> 如果文本不换行，它会按我想要的方式显示： https://play.tailwindcss.com/UEGaldW7eo 但是，当文本变大并开始换行时，行（UUID + 文本）不再居中对齐。 我想要的是： 但我无法让它发挥作用。 有什么想法吗？ 可能的问题是由于 utrn 中的换行符导致flex-alignment。我使用 items-center 和 text-start 类来尝试实现您期望的布局。比如： div class="flex flex-col items-center text-start"> <div class="flex flex-row items-start justify-center"> <div class="pl-4">UUID</div> <div class="ml-2"> Text that is long enough to wrap on 2 lines and more </div> </div> </div> 代码演示

如何将按钮（小部件）在网格中居中 - GTK C

我试图将这些按钮放在创建的网格中。我尝试过 set_halign 和变体，但没有什么是我想要的。不确定如何格式化，但请帮忙。 #包括 圣...