HTML中怎么设置块状元素水平居中

这篇文章主要介绍了HTML中怎么设置块状元素水平居中的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML中怎么设置块状元素水平居中文章都会有所收获，下面我们一起来看看吧。

1、通过定义块状元素宽度和设置margin: 20px auto;来实现居中（块状元素中的文字不会居中，如果要居中我们可以在div样式设置中添加text-align: center;来实现块状元素水平居中，在代码中我们使用内联式书写css样式）代码结果如下：

                                                            
                        定义宽度的块状元素水平居中           
    

2、不定义宽度实现块状元素水平居中，我们在div标签中添加了table标签，在css样式中使用table元素来设置我们的块状元素居中，代码结果如下：

                                                                                        
                        
                                
                                        
                                                
                                                        
                                                                
第一段文本
                                                                
第二段文本
                                                                
第三段文本
                                                        
                                                
                                        
                                
                        
                
        

3、不定宽块状元素，通过改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中；代码结果如下：

                                                                                        
                        
                                
W3cschool
                        
                        
                                
W3cschool
                        
                
        

关于"HTML中怎么设置块状元素水平居中"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"HTML中怎么设置块状元素水平居中"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。