zoukankan      html  css  js  c++  java
  • 图片垂直居中

    <img src ="..." alt="" >
    

      html标签分三种

    • block:块级元素(div)多个div会换行显示,可以设置宽高;
    • inline:行内元素(span)多个span会在一行显示,不能设置宽高;
    • inline-block:行内块元素(img)多个img会在同一行显示,可以设置宽高。

    图片垂直居中1:

    <style type="text/css">
    	div{ 300px;height: 300px; border: 1px solid black;text-align: center;line-height: 300px;}
    </style>
    
    <div>
        <img src="#" alt="" >
    </div>

    图片垂直居中2:

    <style type="text/css">
      div{ 300px;height: 300px; border: 1px solid black;text-align: center;}
      span{display: inline-block; 0;height: 100%;vertical-align: middle;}
      img{vertical-align: middle;}
    </style>
    <div>
      <span></span>
      <img src="1230.jpg" alt="">
    </div>
    

      span设置行内块元素等于放了两个img;

      如果两个img都加了vertical-align=center,那么双方就对齐了垂直方向的中间位置,其中一个height=100%占满盒子,另外一个会垂直方向居中。

    vertical-align=middle;

  • 相关阅读:
    CAP.dll of dotnetcore
    GRPC 高性能 RPC 框架, 服务间通讯
    REST Client
    ERP Export
    ERP Update DataSource
    knockout js
    面试题目总结
    JavaScript Objiects and Prototypes
    PLS-00172: string literal too long
    字符串连接性能
  • 原文地址:https://www.cnblogs.com/menghu1994/p/11064512.html
Copyright © 2011-2022 走看看