中心对齐：CSS布局

当您制作页面时，您经常需要在中心与CSS方法对齐：例如，将主单元居中。 有几种方法来解决这个问题，每一个迟早都要被任何布局设计者使用。

将文本对齐到中心

通常，为了装饰的目的，您需要将文本对齐设置为中心，在这种情况下，CSS可以减少布局时间。 以前，这是使用HTML属性完成的，但现在标准要求您将文本与样式表的帮助对齐。 不同于块，您需要更改外部缩进，在CSS中，文本以中心为中心使用一行：

• 文本对齐：中心;

该属性是继承的，并从父代传递给所有后代。 不仅影响文本，还影响其他元素。 为此，它们必须为小写（例如，span）或行块（设置了display：block属性的任何块）。 后一个选项还允许您更改元素的宽度和高度，更灵活地调整缩进。

通常在页面对齐上归因于标签本身。 这将立即使代码无效，因为W3C已将align属性识别为已过时。 不建议在页面上使用它。

将块对齐到中心

如果要将div的对齐方式设置为中心，CSS可以提供一种相当方便的方式：使用外部边距保证金。 缩进可以分配给块元素和逐个块元素。 属性的值必须为0（垂直缩进）和自动（水平自动缩进）：

• 保证金：0自动;

现在该选项被认定为绝对有效。 外部缩进的使用还允许您将图像对齐在中心：CSS属性边距允许解决与页面上的元素定位相关的许多问题。

将块对齐到左边缘或右边缘

有时您不需要在CSS中使用中心对齐方式，但是您需要并排放置两个块：一个位于左边缘，另一个位于右侧。 为此，有一个float属性，它可以采用三个值之一：left，right或none。 假设你有两个块需要并排放置。 那么代码将是：

• .left {float：left;}
• .right {float：right}

如果还有第三个块，它应位于前两个块（例如，页脚）下，则需要设置clear属性：

• .left {float：left;}
• .right {float：right}
• 页脚{clear：both}

事情是，左边和右边的类的块从一般流程中删除，也就是所有其他元素忽略了对齐元素的存在。 清除：两个属性允许页脚或任何其他块查看从流中删除的元素，并防止左右两侧的浮动。 因此，在我们的例子中，页脚将向下移动。

垂直对齐

有时在CSS方法中设置中心对齐还不够，您仍然需要更改子块的垂直位置。 任何行或行块元素都可以按压到顶部或底部边缘，位于父元素的中间，或者位于任意位置。 通常，您需要使用vertical-align属性将块与中心对齐。 假设有两个块，一个嵌套在另一个块中。 在这种情况下，内部块是一个行块元素（显示：inline-block）。 您必须垂直对齐子区块：

• 对齐上边框 - .child {vertical-align：top};
• 中心对齐 - .child {vertical-align：middle};
• 下边框对齐 - .child {vertical-align：bottom};

块元素既不是text-align也不是vertical-align函数。

对齐块的可能问题

有时使用CSS方法对齐中心周围的div可能会导致小问题。 例如，如果使用float：例如，有三个块：.first，.second和.third。 第二和第三块位于第一块。 第二类的元素是左对齐的，最后一个块是左对齐的。 均衡后，两者都脱离了流。 如果父元素没有高度（例如，30em），它将不再沿着子块的高度伸展。 为避免此错误，请使用“spacer” - 可以看到.second和.third的特殊块。 CSS代码：

• .second {float：left}
• .third {float：right}
• .clearfix {height：0; 清除：两个;}

通常使用的是伪类：之后，这也允许您通过创建伪分布（在div中的示例中，容器类在.first中并包含.left和.right）将块返回到站点）：

• .left {float：left}
• .right {float：right}
• .container：{content：''; 显示：表; 清除：两个;}

上述选项是最常见的，虽然有几个变体。 您可以随时找到通过实验创建伪散射的最简单和最方便的方式。

布局设计者经常遇到的另一个问题是线块元素的对齐。 每个人都会自动添加一个空格。 由负缩进指定的margin属性有助于解决这个问题。 还有其他方法的使用频率较低：例如，重置 字体大小。 在这种情况下，font-size：0在父元素的属性中设置。 如果块中有文本，则在线块元素的属性中返回所需的字体大小。 例如，font-size：1em。 该方法并不总是方便，所以使用外部缩进的版本更为常用。

对齐块允许您创建漂亮功能的页面：这是整体布局的布局，商店在线商店的位置以及名片上的照片。