CSS 垂直对齐 |
您所在的位置:网站首页 › dreamweaver如何让图片居中 › CSS 垂直对齐 |
即使使用 CSS Grid 和 Flexbox 等有用的工具,在 CSS 中居中元素仍然是众所周知的挑战。当你成功地将某些东西居中时,你会想要向朋友展示它。 为什么居中 CSS 元素如此困难CSS 可能很难使用。例如,如果你尝试水平或垂直对齐某物,这并不难。你可以将内联元素的 text-align 设置为居中,而 margin: 0 auto 将用于块级元素。 但是,如果你尝试将垂直和水平对齐方式结合起来,则会在多个方面出现问题。 在本教程中,我将向你介绍三种在 CSS 中正确居中 div、文本或图像的不同方法。 如何使用 CSS Position 属性将元素居中CSS position 属性的值可能是 relative、absolute、fixed 或 static(默认值)。设置这些值之后,你将能够把顶部、右侧、底部和左侧属性应用于元素。 相对值和绝对值的组合可以完成很多事情,因此你可以使用它来居中任何事物。 看看下面的代码示例。 如何使用 CSS 定位居中文本I'm a Camper, and I'm vertically centered * { margin: 0; padding: 0; box-sizing: border-box; } .container { position: relative; height: 400px; border: 2px solid #006100; } .centered-element { margin: 0; position: absolute; top: 50%; transform: translateY(-50%); } 如何使用 CSS 定位居中图像 * { margin: 0; padding: 0; box-sizing: border-box; } .container { position: relative; height: 400px; border: 2px solid #006100; } .centered-element { margin: 0; position: absolute; top: 50%; transform: translateY(-50%); }上面的代码使文本和图像垂直居中。为了兼顾垂直和水平居中,我们需要在 CSS 中做一些调整。我们将 top 属性设置为 50%,在 X 轴和 Y 轴上添加一个 transform。 * { margin: 0; padding: 0; box-sizing: border-box; } .container { position: relative; height: 400px; border: 2px solid #006100; } .centered-element { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }文本显示如下: 图像显示如下: 请注意,我应用了 transform 属性是因为子元素(具有名为 “centered-element” 的 class)略微偏离中心。translateY() 将它垂直推到中心,并在 X 和 Y 轴上平移 (translate())将它垂直和水平推到中心。 如何在 CSS 中使用 Flexbox 居中元素CSS Flexbox 处理一维(行或列)的布局。使用 Flexbox,只需三行代码就可以很容易地将 div、文本或图像居中。 请看下面的代码示例。 如何用 Flexbox 居中文本I'm a Camper, and I'm vertically centered .container { display: flex; align-items: center; height: 600px; border: 2px solid #006100; } 如何用 Flexbox 居中图像 .container { display: flex; align-items: center; height: 600px; border: 2px solid #006100; }我们用短短的两行代码实现垂直对齐。为了使图像和文本水平居中,添加 justify-content: center。 I'm a Camper, I'm now vertically and horizontally centered .container { display: flex; align-items: center; justify-content: center; height: 600px; border: 2px solid #006100; }文本显示如下: 图像显示如下: 如何使用 CSS Grid 居中元素使用 Flexbox,可以很容易地将任何东西居中,对吧?使用 CSS Grid 居中元素也很容易,两行代码就够了。 如何用 CSS Grid 居中文本I'm a Camper, and I'm vertically centered .container { display: grid; align-items: center; height: 600px; border: 2px solid #006100; } 如何用 CSS Grid 居中图像 .container { display: grid; align-items: center; height: 600px; border: 2px solid #006100; }上面的示例为你处理了垂直居中的问题。要使文本和图像也水平居中,请将 align-items 替换为 place-items——align-items 和 justify-content 的结合: .container { display: grid; place-items: center; height: 600px; border: 2px solid #006100; }文本显示如下: 图像显示如下: 如何在 CSS 中将独立的 Div、文本或图像居中上面的三种方法可以让你在容器中居中放置一个 div、文本或图像。你还可以将独立的 div、文本或图像居中。 现在让我们看看如何做到这一点。 如何在 CSS 中居中独立的 div div.container { height: 300px; width: 300px; border: 2px solid #006100; margin: 0 auto; } 如何在 CSS 中居中独立的文本I'm a Camper, and I'm centered p { text-align: center; } 如何在 CSS 中居中独立的图像 img { display: block; margin: 0 auto; } /* Applies a display of block, a margin 0f 0 at the top and bootom, and auto on the left and right */ 总结我希望这篇教程为你提供了有关垂直对齐以及如何在 CSS 中居中元素的足够知识,这样你在下一个项目中用到它们时就不会困惑了。 感谢你阅读本文。 原文:CSS Vertical Align – How to Center a Div, Text, or an Image [Example Code],作者:Kolade Christopher Kayode |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |