zoukankan      html  css  js  c++  java
  • inline-block和block元素水平居中显示

    一般来说,在页面中需要进行水平居中的元素,大致分为两种,一种是块级元素,即display:block,一种是行内元素display:inline-block;
    块级元素包括div,ul,p,以及所有的h类标签。行内元素又叫内联元素,a,img,input是最常见的。这些行内元素,可以通过display:block转换成块级元素。
    弄明白了哪些是块级元素,哪些是行内元素,我们还要知道其主要区别,两个行内元素可以在一行显示,但是第二个块级元素只能换行显示。
    让行内元素水平居中显示,我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的,我们的行内元素就相当于一行之内的文字了,所以可以使用这个方法。
    让块级元素,水平居中的办法是为块元素本身添加margin:0 auto;这样块级元素的左右边距就是自动的,也就可以在是水平方向上居中了。
    不管是inline-block还是block,我们需要理解其居中的原理,是inline-block,就对其父级元素添加text-align:center,是块级元素就对其本身添加margin:0 auto;记住了这些,以后再对元素进行居中,居左,居右的时候就不用担心自己不会啦。
  • 相关阅读:
    树上差分
    Java学习笔记(二)事件监听器
    Java学习笔记(三)Java2D组件
    1066. Root of AVL Tree (25)
    有一种蓝,是神往,是心醉,是心伤
    软考论文的六大应对策略V1.0
    iOS 图形编程总结
    【悼鲁迅】诗一首
    【秋游】诗一首
    【游普罗旺斯薰衣草庄园】诗一首
  • 原文地址:https://www.cnblogs.com/runhua/p/9566512.html
Copyright © 2011-2022 走看看