Home > Developer > Web Develop
Tag: element centered vertically centered inline element Center Block Element Center
Vertical center of elements in single-line solutionCode implementationTo set the row element's row higher than the parent element's height or the height of the parcel block can be vertically centered, see the code effect
Index.html
<! DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8"> <title>Vertical centering of elements in a single line</title> <style> Div { width: px; height: px; background: rgb (+, 186, +); } /* Set parent block size and color */ Div a {text-decoration : none ; font-size : 25 px ; color : RGB (254 , 7 , 183 ); font-weight : 700 ; line-height : 200 px ; / * Set inline elements with rows higher than the height of the parent block to achieve vertical centering * / span { display: inline-block ; width: px ; height: px ; font-size: px ; line-height: px ; background: rgb (+/ -) ;} / * principle above, line higher than the height of the block to achieve vertical center of content * / </style> </head> <body> <div><a href="#">Test links</a></div> <span>Test text</span> </body></html>Let the parcel block simulate the table cell and then use vertical-align it to control the position (support for English word position also supports percent adjustment)
Index.html
<! DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Inline elements in multiple rows are centered vertically</title> <style> . Wrap{ height:px; width:px; background: rgb (1, 244, ); display: table-cell; vertical-align: Middle; } / * Let the parcel block simulate the table effect, resulting in a vertical center effect * / </style></head><body> <div class="wrap"><span> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex facere Repellendus, Porro velit, Modi culpa, Tempora totam dolore quaerat natus vel fugiat non voluptas unde quod fuga, Iusto cumque Rem.</span> <span>Beatae natus Obcaecati error Fugiat harum consequatur Possimus Modi tempore aut Tenetur nostrum illo Maxime Consequuntur, Nulla, blanditiis alias Voluptas voluptates neque minus Accusamus cumque rem inventore. Eligendi, Tempora, Impedit.</span> <span>Optio Delectus, Aliquid pariatur fugit eveniet accusantium eius et veritatis blanditiis temporibus, sed reiciendis sunt qu AE quam obcaecati labore quia sit debitis Recusandae alias rerum! Libero adipisci sed velit facere.</span> <span>Laudantium, adipisci in nulla atque aut similique voluptatum Maxime Corrupti nobis, Consequatur impedit Ipsa reprehenderit Voluptates Quo, Inventore tempora tenetur quibusdam deserunt! Animi Impedit, Earum dolore. Inventore Sequi Nemo Saepe.</span> <span>Eligendi, Porro voluptas molestiae, corrupti atque ad dolor cupiditate tempore adipisci similique. Dolorum voluptates id nam, non ipsum optio, incidunt culpa quia fuga vitae qui suscipit consectetur ipsa nesciunt aut.</span> </span></div></body></html>Using absolute positioning, the element is directly to half of the page, and then the element is pulled back to half its size to achieve vertical centering
Tips
If the parent element of the absolute element is used position any attribute, the absolute of the child element cannot be separated from the parent element.
Index.html
<! DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Block element vertically centered (known height)</title> <style>*{margin: 0; padding: 0; } . Testdiv{ width: px ; Height: + px ; background: rgb (+, 221) ; position: Absolute ; top:% ; margin-top:-px ;} / * Navigate to the page's general, pull back half the size of the element, and make it centered * / </style></head><body> <div class="Testdiv"> </div></body></html>Center of the page Element _ (2) element is centered vertically
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
