搜索内容：
时间：2019-08-13
编辑:网站制作公司
814
0
我们今天有很多方法可以在CSS中对齐事物，并且使用它并不总是一个明显的决定。但是，了解可用的内容意味着如果遇到特定的对齐问题，您可以尝试一些策略。
上海网站开发在本文中，我将介绍不同的对齐方法。我将解释一些人们所具有的关键点，并指出更完整的属性和价值参考，而不是为每个提供全面的指南。与CSS的大部分内容一样，您可以通过了解方法行为的基本知识来做很长的事情，然后需要一个地方去查看更精细的细节，以获得您想要的精确布局。
当我们在页面上有一些文本和其他内联元素时，每行内容都被视为一个行框。该属性text-align将在页面上对齐该内容，例如，如果您希望文本居中或对齐。但是，有时您可能希望将该行框内的内容与其他内容对齐，例如，如果您在文本旁边显示图标或不同大小的文本。
在下面的示例中，我有一些内嵌图像更大的文本。我正在使用vertical-align: middle图像将文本对齐到图像的中间。
请记住，该line-height属性将更改行框的大小，因此可以更改您的对齐方式。以下示例使用150px的较大行高值，并将图像对齐top。图像对齐到行框的顶部而不是文本的顶部，删除该行高或使其小于图像的大小，图像和文本将在文本的顶部对齐。
事实证明，line-height文本的大小确实非常复杂，我不打算在本文中找到那个兔子洞。如果您正在尝试精确对齐内联元素并希望真正理解正在发生的事情，我建议您阅读“ Deep Dive CSS：字体指标，line-height和”vertical-align。
vertical-align如果要对齐任何内联元素，则该属性很有用。这包括元素display: inline-block。表格单元格的内容也可以与vertical-align属性对齐。
该vertical-align属性对弹性或网格项没有影响，因此如果将其用作回退策略的一部分，将停止应用父元素转换为网格或弹性容器的时间。例如，在下一支笔中，我有一组布置的项目display: inline-block，这意味着即使浏览器没有Flexbox，我也能够对齐项目：
在下一支笔中，我将其inline-block视为Flex布局的后备。对齐属性不再适用，我可以添加align-items以对齐Flexbox中的项目。您可以看出Flexbox方法正在发挥作用，因为您在使用时将获得的项之间的差距display: inline-block消失了。
vertical-align适用于表格单元格的事实是使用display: table-cell作品垂直居中项目的技巧。
既然我们确实有更好的方法来在CSS中对齐框（我们将在下一节中看到），我们不需要在除了设计它们的内联和文本元素之外的地方使用vertical-align和text-align属性。但是，它们仍然完全有效，可以用于那些文本和内联格式，因此请记住，如果您尝试对齐某些内联，那么就是这些属性，而不是您需要达到的Box Alignment。
Box Alignment Specification处理我们如何调整其他所有内容。该规范详细说明了以下对齐属性：
justify-content
align-content
justify-self
align-self
justify-items
align-items
您可能已经将这些属性视为Flexbox规范或Grid的一部分。这些属性的历史是它们起源于Flexbox的一部分，并且仍然存在于Level 1规范中; 然而，当它们显然更有用时，它们被转移到他们自己的规范中。我们现在也在网格布局中使用它们，并且它们也被指定用于其他布局方法，尽管当前的浏览器支持意味着您将无法使用它们。
因此，下次有人在互联网上告诉你垂直对齐是CSS中最难的部分，你可以告诉他们（这甚至适合推文）：
.container {
display: flex;
align-items: center;
justify-content: center;}将来，我们甚至可以display: flex在块布局实现Box Alignment属性后省去。但是，目前，使您希望以Flex容器为中心的东西的父级是水平和垂直对齐的方式。
对齐flex和grid项时，您有两个可能的对齐方式：
您有网格或弹性容器中的备用空间（一旦布置了项目或轨道）。
您还可以将项目本身放在放置它的网格区域内，或放在Flex容器内的横轴上。
我向您展示了上面的一组属性，对齐属性可以被认为是两组。处理备用空间分配的那些，以及使项目本身一致的那些。
结束的属性-content是关于空间分布的，因此当您选择使用align-content或justify-content在网格轨道或弹性项目之间分配可用空间时。它们不会改变flex或grid项本身的大小; 他们将它们移动，因为它们会改变备用空间的位置。
下面，我有一个flex示例和一个网格示例。两者都有一个比显示弹性项目或网格轨道所需的容器大的容器，所以我可以使用align-content和justify-content分配该空间。
然后，我们有align-self和justify-self适用于个别弯曲或电网项目; 您还可以使用容器上的align-items和justify-items一次设置所有属性。这些属性处理实际的flex或grid项，即在Grid Area或flex line内部移动内容。
网格布局 您可以获得这两个属性，因为您可以在块和内联轴上移动项目，因为我们有一个定义的网格区域。
柔性布局 您只能在横轴上对齐，因为主轴仅由空间分布控制。因此，如果您的项目是一行，您可以使用align-self它们在柔性线内上下移动，使它们彼此对齐。
在下面的示例中，我有一个flex和一个网格容器，align-items并且align-self在Flexbox中使用并在横轴上相互上下移动项目。如果您使用Firefox，并使用Firefox Flexbox Inspector检查元素，您可以看到Flex容器的大小以及项目在其中垂直移动的方式。
在网格中，我可以使用所有四个属性在网格区域内移动项目。再次，Firefox DevTools网格检查器在对齐时非常有用。网格线重叠后，您可以看到内容移动的区域：
使用CodePen演示中的值来了解如何在每种布局方法中移动内容：
人们记住网格和Flexbox中的对齐属性的一个引用问题是没有人能记住是对齐还是对齐。哪个方向是哪个？
对于网格布局，您需要知道是否在块或内联方向上对齐。块方向是页面上的方向块（在您的书写模式下），即垂直的英语。内联方向是句子运行的方向（因此对于从左到右水平的英语）。
要在块方向中对齐事物，您将使用以...开头的属性align-。您可以使用align-content网格轨道之间分配的空间，如果在网格容器可用空间，align-items或align-self左右移动的项目已经放置在网格区域内。
以下示例具有两个网格布局。一个writing-mode: horizontal-tb（英语的默认值）和另一个writing-mode: vertical-rl。这是他们之间的唯一区别。您可以看到我应用的对齐属性在两种模式下在块轴上以完全相同的方式工作。
要在内联方向上对齐事物，请使用以...开头的属性justify-。使用justify-content网格轨道之间分配空间，justify-items或justify-self对准在一字形方向的网格区域内的项目。
再一次，我有两个网格布局示例，以便您可以看到内联始终是内联的 - 无论您使用哪种写入模式。
Flexbox有点棘手，因为我们有一个主轴可以更改为row或column。所以，让我们首先考虑一下主轴。它与flex-direction酒店一起设置。此属性的初始（或默认）值row将在当前正在使用的写入模式中将flex项目排成一行 - 这就是为什么在使用英语时，我们最终会在创建flex时水平布置项目容器。然后，您可以将主轴更改为，flex-direction: column并且项目将作为列布局，这意味着它们将按照该写入模式的块方向布局。
正如我们可以进行轴切换一样，Flexbox中最重要的因素是“哪个轴是我的主轴？”一旦你知道了，那么对齐（当你在主轴上时）就可以使用了justify-content。主轴是行还是列无关紧要。您可以使用控制Flex项目之间的空间justify-content。
在横轴上，您可以使用align-items哪个将对齐Flex容器内的项目或多行Flex容器中的柔性线。如果您有一个多行容器使用flex-wrap: wrap 并在该容器中有空间，您可以使用align-content在十字轴上分配空间。
在下面的示例中，我们同时使用显示为行和列的Flex容器：
Grid和Flexbox中的justify-content和align-content属性是关于分配额外空间。所以要检查的是你有额外的空间。
这是一个Flex示例：我已设置flex-direction: row并且我有三个项目。它们不会占用flex容器中的所有空间，所以我在主轴上有空余空间，初始值为justify-contentis flex-start，所以我的项目在开始时都排成一行，额外的空间在最后。我正在使用Firefox Flex Inspector突出显示空间。
如果我将flex-direction更改为space-between，则现在在项目之间分配额外的空间：
如果我现在为我的项目添加更多内容以使它们变得更大并且不再有任何额外空间，那么justify-content什么也不做 - 只是因为没有空间可以分发。
一个常见的问题，我问是为什么justify-content不工作时flex-direction是column。这通常是因为没有空间可以分发。如果您采用上面的示例并进行制作flex-direction: column，则项目将显示为列，但项目下方将没有额外的空间flex-direction: row。这是因为当你创建一个Flex容器时，display: flex你有一个块级flex容器; 这将占据内联方向的所有可能空间。在CSS中，事物不会在块方向上伸展，因此没有额外的空间。
向容器添加高度 - 只要超过显示项目所需的高度 - 您将拥有额外的空间，因此justify-content可以在您的列上使用。
网格布局实现了两个轴的所有属性，因为我们总是有两个轴可以在网格布局中处理。我们创建轨道（可能在任一维度的网格容器中留下额外的空间），因此我们可以用align-content或分配该空间justify-content。我们还有网格区域，该区域中的元素可能不占用该区域的整个空间，因此我们可以使用align-self或justify-self移动该区域周围的内容（或者align-items，justify-items更改所有项目的对齐方式）。
Flexbox没有Grid Grid布局的轨道。在主轴上，我们必须使用的是项目之间的空间分布。没有放置弹性项目的轨道的概念。因此，没有创建用于移动项目的区域。这就是为什么justify-selfFlexbox中的主轴上没有属性。
但是，有时您确实希望能够以不同的方式对齐项目组或项目组的一部分。常见的模式是拆分导航栏，其中一个项目与组分开。在这种情况下，规范建议使用汽车保证金。
自动边距将占据其应用方向的所有空间，这就是为什么我们可以使用auto的左右边距来居中一个块（例如我们的主页面布局）。两侧都有自动边距，每个边距都会占用所有空间，因此将块推入中间位置。使用我们的flex项目行，我们可以添加margin-left: auto到我们希望拆分发生的项目，只要flex容器中有可用空间，就会得到拆分。这与Flexbox很好地配合，因为只要没有可用空间，这些项就像普通的弹性项一样。
我认为经常忽略的一件事是Flexbox对于进行微小的布局工作有多么有用，你可能认为使用vertical-align是可行的方法。我经常使用Flexbox来获得小图案的整齐排列; 例如，对齐文本旁边的图标，基线使用不同的字体大小对齐两个内容，或者使表单字段和按钮正确排列。如果您正在努力寻找能够很好地排列的东西vertical-align，那么也许可以尝试使用Flexbox。请记住，如果需要，还可以创建内联Flex容器display: inline-flex。
没有理由不使用Flexbox，甚至Grid来进行小型布局作业。它们不仅适用于大块布局。尝试不同的东西，看看什么效果最好。
人们往往非常渴望知道做对错的方式是什么。实际上，往往没有对错; 您的模式中的一个小差异可能意味着Flexbox之间的差异最大，否则您将使用vertical-align。
总结一下，我快速总结了对齐的基础知识。如果您还记得这些规则，那么您应该能够将大多数内容与CSS对齐：
您是在对齐文本还是内联元素？如果是这样，你需要使用text-align，vertical-align和line-height。
您是否有要在页面或容器中心对齐的项目？如果是这样，请将容器设置为弹性容器，然后设置align-items: center和justify-content: center。
对于网格布局，align-以块方向工作的属性; 那些从justify-内联方向开始工作的人。
对于Flex布局，align-以跨轴工作开始的属性; 那些从justify-主轴开始工作的人。
在justify-content和align-content性质分配额外空间。如果flex或grid容器中没有多余空间，它们将不执行任何操作。
如果您认为justify-self在Flexbox中需要，那么使用自动边距可能会为您提供您所追求的模式。
您可以使用Grid和Flexbox以及微小布局作业的对齐属性以及主要组件 - 实验！
上海网站开发
3
s后返回登录
3
s后返回登录
