we can align an element or the content inside it by using css which provides various options for alignment of an element and its content horizontally, vertically or in center.
Horizontal Alignment
-
Inline-elements
Inline elements or inline-block elements such as text, anchor, span, etc. can be aligned horizontally with the help of CSS text-align property.
-
Block-level elements
Block-level elements such as div, p, etc. can be aligned horizontally with the help of CSS margin property, but width of element should not be 100% relative to the parent as then it wouldn’t need alignment.
-
Block-level elements using float or position scheme
Elements can be aligned horizontally with the help of CSS float property which aligns multiple elements to either left/right and not in center or using CSS positioning scheme absolute method.
Example
Let’s see an example of CSS horizontal alignment −
立即学习“前端免费学习笔记（深入）”；
Live Demo
CSS Horizontal Alignment ScreenAdam Martha SamanthaPremium 1Premium 2Premium 3
输出
这将产生以下输出 −
垂直对齐
-
内联元素
内联元素或内联块元素，如文本、锚点等，可以通过CSS padding、CSS line-height或CSS vertical-align属性进行垂直对齐。
-
块级元素
块级元素，如div、p等，可以通过CSS margin属性、CSS flex属性以及CSS align-items属性进行垂直对齐，或者使用CSS transform属性的绝对定位方案方法。
示例
让我们看一个CSS垂直对齐的示例 −
演示
CSS Horizontal Alignment ScreenAdam MarthaSamantha
Premium Readjustable SofaPremium Solo 1Premium Solo 2Premium Solo 3输出
这将产生以下输出 −
当div未调整时
当div被调整时
居中对齐
我们可以使用上述水平和垂直对齐的方法来将元素居中对齐。
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
更多热门AI工具
