horizontal alignmentinline-elementsinline 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 elementsblock-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 schemeelements 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.
examplelet’s see an example of css horizontal alignment −
live demo
<!doctype html><html><head><title>css horizontal alignment</title><style>.screen { padding: 10px; width: 70%; margin: 0 auto; background-color: #f06d06; text-align: center; color: white; border-radius: 0 0 50px 50px; border: 4px solid #000;}.seats span, .backseats div{ margin: 10px; padding: 10px; color: white; border: 4px solid #000;}.seats span{ width: 120px; display: inline-block; background-color: #48c9b0;}.left{ text-align: left;}.right{ text-align: right;}.center{ text-align: center;}.seats{ text-align: center;}.backseats div { background-color: #dc3545;}.leftfloat{ float: left;}.rightabsolute{ position: absolute; right: 150px;}</style></head><body><div class="screen">screen</div><div class="seats"><span class="left">adam</span><span class="center">martha</span><span class="right">samantha</span><div class="backseats"><div class="leftfloat">premium 1</div><div class="leftfloat">premium 2</div><div class="rightabsolute">premium 3</div></div></div></body></html>
输出这将产生以下输出 −
垂直对齐内联元素内联元素或内联块元素，如文本、锚点等，可以通过css padding、css line-height或css vertical-align属性进行垂直对齐。
块级元素块级元素，如div、p等，可以通过css margin属性、css flex属性以及css align-items属性进行垂直对齐，或者使用css transform属性的绝对定位方案方法。
示例让我们看一个css垂直对齐的示例 −
演示
<!doctype html><html><head><title>css horizontal alignment</title><style>.screen { padding: 10px; width: 70%; margin: 0 auto; background-color: #f06d06; text-align: center; color: white; border-radius: 0 0 50px 50px; border: 4px solid #000;}.seats span:not(.withpadding){ margin: 10px; padding: 10px; color: white; border: 4px solid #000;}.seats span:not(.vertical){ height: 40px; display: inline-block; background-color: #48c9b0;}.withpadding{ padding: 20px 20px 0px; height: 20px; color: white; border: 4px solid #000;}.vertical{ display: inline-table; background-color: #48c9b0; height: 40px;}.verticaltext { display: table-cell; vertical-align: middle;}.withlineheight{ line-height: 40px;}.seats{ text-align: center;}.backleftseat{ background-color: #dc3545; max-height: 100px; height: 70px; margin: 20px; width: 300px; display: inline-block; position: relative; resize: vertical; overflow: auto; border: 4px solid #000;}.withposition{ position: absolute; top: 50%; left: 2px; right: 2px; color: white; padding: 20px; transform: translatey(-50%);}.backrightseats{ height: 122px; width: 800px; float: right; display: inline-flex; flex-direction: row; justify-content: center; align-items: center;}.withflex { background-color: #dc3545; border: 4px solid #000; margin-right: 10px; color: white; padding: 20px;}</style></head><body><div class="screen">screen</div><div class="seats"><span class="withpadding">adam</span><span class="withlineheight">martha</span><span class="vertical"><p class="verticaltext">samantha</p></span><div><div class="backleftseat"><div class="withposition">premium readjustable sofa</div></div><div class="backrightseats"><div class="withflex">premium solo 1</div><div class="withflex">premium solo 2</div><div class="withflex">premium solo 3</div></div></div></body></html>
输出这将产生以下输出 −
当div未调整时
当div被调整时
居中对齐
我们可以使用上述水平和垂直对齐的方法来将元素居中对齐。
以上就是css 居中、水平和垂直对齐的详细内容。