zoukankan      html  css  js  c++  java
  • 将图片在div中进行水平和垂直对齐

    将图片在div中进行水平和垂直对齐

    要进行水平对齐,只需在父级元素的样式中指定:

    text-align: center;

    注意,是在父级元素的样式中指定,而不是在img本身的样式中指定。

    要进行垂直对齐,相对来说则麻烦得多。期待简单的在img元素的父级元素的样式中指定vertical-align: middle是行不通的,在img元素本身的样式中指定也同样行不通(你在网上查到的方法都是这样)。真正有效的方法如下:

    首先,由于vertical-align: middle这个样式是只有在display样式以inline-block模式起作用时才会生效,因此,你必须先得让display的inline-block生效才行。而inline-block要生效,则同一行必须至少有两个元素才行,因为只有两个元素在一起才能形成“内联”的关系。

    因此,你需要在图片的同一行放置另外一个元素,并对这个元素进行样式指定:

           vertical-align:middle;

           display:inline-block;

           height:100%;

    这里height设置为100%,表示让这个元素的高度充满其父级(也是图片的父级)。这样,当这两个元素以其自身的高度中心线对齐时,自然就正好位于父级元素的垂直中心位置。

    完整的HTML代码如下:

        <div id="header1">

            <span id="span1"></span>

            <img src="1.png">

        </div>

    完整的CSS代码如下:

            #span1{

                vertical-align:middle;

                display:inline-block;

                height:100%;

            }

            img {

                vertical-align: middle;

            }

    这里使用的这个位于同一行的额外的元素是span,你用别的元素也可以,比如label、b等等,只要当这个元素的height属性被设置为100%时确实可以充满父级元素的高度即可。

  • 相关阅读:
    Path Sum II
    Convert Sorted Array to Binary Search Tree
    Construct Binary Tree from Inorder and Postorder Traversal
    Construct Binary Tree from Preorder and Inorder Traversal
    Maximum Depth of Binary Tree
    Binary Tree Zigzag Level Order Traversal
    Binary Tree Level Order Traversal
    Same Tree
    Validate Binary Search Tree
    Binary Tree Inorder Traversal
  • 原文地址:https://www.cnblogs.com/chenbing/p/4100766.html
Copyright © 2011-2022 走看看