html代码结构
<!--html-->
<div class="warp">
<img src="/test.png" class="img">
</div>
css
.warp {
width: 500px;
height: 350px;
line-height: 350px;
text-align: center;
background: #ccc;
}
.img{
display: inline-block;
width: auto;
height: auto;
max-width: 500px;
max-height: 100%;
vertical-align: middle;
}
横图效果
横图效果
竖图效果
竖图效果
小图效果
小图效果
css图片水平居中 css图片垂直居中 css图片水平垂直居中
css图片居中(水平居中和垂直居中) css图片水平居中 块状元素直接用text-align:center, di...
CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 全局样式 第一种：...
CSS水平居中、垂直居中、水平垂直居中方法总结 文字的水平居中: 单行文字的垂直居中： 让有宽度的div水平居中：...
css 水平垂直居中实现方式 水平垂直居中包括行内元素居中，以及块级元素居中 行内元素html结构 块级元素结构 ...
居中有水平居中和垂直居中。 水平居中+垂直居中 flex法 position法 就是计算呗~ 参考 CSS各种居中...
html代码结构 css 横图效果 竖图效果 小图效果
水平居中 垂直居中 垂直水平居中 已知元素的宽高的居中布局 定位居中布局 盒模型居中布局 图片的垂直水平居中(利用...
css 实现水平居中，垂直居中，水平垂直居中，是css 入门的必修课题，也是代码实践,笔试面试中经常遇到的场景。这...
前言 设计网页的时候，除了CSS水平居中的需求外，还会经常遇到CSS垂直居中的需求，CSS垂直居中跟CSS水平居中...
本文标题：CSS 实现图片 水平居中 垂直居中 自适应居中
本文链接：https://www.haomeiwen.com/subject/hqrauhtx.html
网友评论