CSS-布局【1】-图片在div中垂直居中

方法一：在img标签前加span

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type="text/css">
        div{
            width: 600px;
            height: 600px;
            text-align: center;
            border: 1px solid red;
        }

        span{
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

        img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <span></span><img src="demo.jpg">
    </div>
</body>
</html>
时间： 2024-08-05 00:45:32

CSS-布局【1】-图片在div中垂直居中的相关文章

实现图片在一个div中垂直左右都对齐

<div class="info_top_left"> <img src="images/img-product01.png" > </div> .info_top_left { height: 100px; width: 97px; line-height: 100px; border: 1px solid #CACACA; float: left; text-align: center; font-size: 0; } .in

随机图片大小在DIV中垂直居中对齐总结

老遇到这种样式 现在总结一下 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> *{margin:0;padding:0;line-height: 1;font-size: '宋体';padding

css实现图片在div中垂直水平居中代码实例

css实现图片在div中垂直水平居中代码实例:让图片在一个元素中垂直水平居中这样的需求在实际应用中还是很多的,下面就通过代码实例介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

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

将图片在div中进行水平和垂直对齐 要进行水平对齐,只需在父级元素的样式中指定: text-align: center; 注意,是在父级元素的样式中指定,而不是在img本身的样式中指定. 要进行垂直对齐,相对来说则麻烦得多.期待简单的在img元素的父级元素的样式中指定vertical-align: middle是行不通的,在img元素本身的样式中指定也同样行不通(你在网上查到的方法都是这样).真正有效的方法如下: 首先,由于vertical-align: middle这个样式是只有在displa

图片宽度和高度都大于div,实现图片在div中居中

<style type="text/css"> #out{height:100px; width:150px; position:relative; overflow:hidden;} #mid{position:absolute;top:50%; left:50%; width:1000px; margin-left:-500px; text-align:center;} #in{ position:relative; top:-50%;} </style>

css如何实现span在div中水平居中

css如何实现span在div中水平居中:本章节介绍一下如何将一个span设置在div中水平居中,下面就通过代码实例介绍一下如何实现此效果.很多朋友可能会认为对span元素施加margin:0px auto就可以将span元素水平居中,其实这是错误的,因为span是内联元素,使用此方式无法实现居中效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <met

文字在div中垂直居中的方法，设置div的高度height和行高line-height一致

文字在div中垂直居中的方法,设置div的高度height和行高line-height一致,如 .containerdiv{ height:60px; line-height:60px; }

单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i></i> <img class="YuYue1" src="images/ReserveServices/YuYue1.png" /> </div>   .ServicesLiTopPic i { display:inline-block

a标签内容在div中垂直居中，不兼容低版本浏览器

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head> <style>.box{width:100px;height:200px;background:orange;border:2px solid #ccc;display: table;}.box a{dis