6 种CSS设置居中的方法
Demos of each of the methods below by clicking here.
Horizontal centering with css is rather easy. When the element to be centered is an inline element we use text-align center on its parent. When the element is a block level element we give width and set the left and right margins to auto.
With text-align: center in mind, most people look first to vertical-align in order to center things vertically.
Unfortunately vertical-align doesn’t apply to block-level elements like a paragraph inside a div, It applies to table cells and it works with some inline elements.
Line-Height Method
All we need to do is set a line-height on the element containing the text larger than its font-size.
<div id="parent"> <div id="child">Text here</div> </div>
#child { line-height: 200px; }
The above works in all browsers, however it will only work for a single line of text. If your text could wrap to a 2nd line you need to use a different method. The value of 200px above is arbitrary. You can use any value you want as long as its larger than the font-size that’s been set.
Centering an Image with Line-Height
What if the content you want centered is an image? Will this method work? The answer is yes with one additional line of css.
CSS Table Method
Above I mentioned that vertical-align applies to table cells which leads us to this method. We’ll display our elements as table and table cell and then use the vertical-align property to center the content.
Note: CSS tables are not the same as html tables.
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
