Home > Developer > Web Develop
# # CSS2 Vertical-align Vertical Alignment
-Baseline default value. Based on baseline alignment
-Middle is located at 1/2 of the lowercase letters of the non-serif font on the same line. Do not set height and row heights for parent elements
-Top in the parent element row
-bottom at the bottom of the parent element line
-Text-top The top of the text on the same line
-Text-bottom at the bottom of the same line of text
-Super The baseline alignment <sup> Upper Corner label of the sub element text on the same line </sup>
-Sub-element text on the same line is aligned with the baseline alignment <sub> subscript </sub>
-Use vertical-align to align the position of the inline element in the vertical direction within a row.
-vertical-align: Only inline elements can be set (line Inline-block)
# # # Vertical Center Alignment
Vertical-align:middle;
Text-align:center;
# # # # Vertical-align using Scenario 1: Vertical alignment within a row
! [] (Http://i.imgur.com/gqvFjtp.jpg)
# # # # Vertical-align using Scenario 2: Vertical alignment in multiple rows
1. Set the ' Vertical-align:middle ' style for the child element to be centered vertically
2. Set the ' Display:table-cell ' to the parent element of the element and set the fixed height
3. Then set the "Vertical-align:middle" and the horizontal alignment "' Text-align:center '"
4. When its element is set to ' Display:table-cell '. and width zeroing, you need to add display:table to the parent element, and set the width 100%
* * All elements of the element (text, child elements-inline, Inline-block) can be centered vertically * *
* * Use Display:table-cell in local layouts to reduce impact on overall layout * *
<style type= "Text/css" >
/* Specify the block element picture to center vertically */
. box-table{
display:table;
width:100%;
}
. box {
Background-color:orange;
height:200px;
Display:table-cell;
Vertical-align:middle;
Text-align:center;
}
img{
width:100px;
}
</style>
<script type= "Text/javascript" ></script>
<body>
<div class= "Box-table" >
<div class= "box" >
</div>
</div>
</body>
css2--Vertical Alignment
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
