html中怎么设置文本框居中显示图片,css如何让图片水平居中显示？

在我们开发前端页面的时候，为了让页面效果美观，会让图片呈现居中效果。那么css怎么让img图片居中显示呢？本篇文章给大家带来css如何让img图片居中。

display属性实现图片居中的两种方法：

1、利用display的table-cell属性值，再配合text-align: center;与vertical-align: middle;设置图片居中

2、设置display: flex;，利用弹性布局flex来设置img图片的居中

下面我们通过简单的代码示例，详细了解一下这两种方法是怎么实现图片居中的。

1、利用display:table-cell来实现img标签图片的水平和垂直居中

img图片居中

.demo{

width: 400px;

height: 300px;

border: 1px dashed #000;

display: table-cell; /*主要是这个属性*/

vertical-align: middle;

text-align: center;

}

.demo img{

width: 200px;

height: 150px;

}

效果图：

说明：

在demo盒子中设置display: table-cell;会让demo盒子作为一个表格单元格显示(类似

和 )，在设置text-align: center;就会让img图片水平居中，设置vertical-align: middle;让img图片垂直居中。

2、弹性布局flex

img图片居中

*{margin: 0;padding:0;}

.demo{

width: 400px;

height: 300px;

margin: 50px auto;

border: 1px dashed #000;

display: flex;

justify-content: center;

align-items: center;

}

.demo img{

width: 200px;

height: 150px;

}

效果图：

html中怎么设置文本框居中显示图片,css如何让图片水平居中显示？相关推荐

Origin Pro 8.5设置文本框居中显示
Q:在图形内新增了Text Object(文本框),如何使其居中? A:可执行如下操作: 单击文本框,右键Programming Control 在对话框内键入:XB.x=1/2*(layer.x.f ...
html设置文本框只读属性,juqery/js/css设置文本框只读属性的方法
一.设置HTML表单文本框为只读的几种方式有时候,我们希望表单中的文本框是只读的,让用户只能查看信息而不能修改其中的信息,使 input type="text" name=&qu ...
css可以设置文本框颜色吗,如何在css中设置文本框颜色
如何在css中设置文本框颜色发布时间:2021-04-29 15:33:54 来源:亿速云阅读:72 作者:Leah 如何在css中设置文本框颜色?针对这个问题,这篇文章详细介绍了相对应的分析和解 ...
html输入框自动对齐,html如何设置文本框对齐
html设置文本框对齐的方法:1.将表格标签table添加到form表单标签内部进行布局:2.文本.组件后添加空格对齐:3.组件同行处理. 本教程操作环境:windows7系统.html5版,DELL ...
gui界面文本输入存入mysql中_把“文本框输入的内容”全部变成“********”，然后存入数据库，如何做到？...
展开全部设置文本框62616964757a686964616fe4b893e5b19e31333234333339的 PasswordChar属性为* (其实可以是任意单个字符的) 读取时同普通的文 ...
php+输入框只读,设置文本框只读（textbox/input readonly）不允许输入
文本框一般是用来让用户输入填写资料的,但有的时候只是用它来显示资料,也就是不允许输入任何内容,这应该怎么设置?只要添加一个只读属性(readonly)就能达到这个目的. 文本框有两种,一种为服务器控件 ...
Win32汇编获取和设置文本框的内容
看一下Win32汇编如何获取和设置文本框的内容: 资源文件如下: #include <resource.h>#define ICO_MAIN 0x1000 //图标 #define DLG ...
java文本框背景_background 设置文本框背景图
background 属性的作用是给元素设置背景,它是一个复合属性,常用的子属性如下: background-color 指定元素的背景颜色. background-image 指定元素的背景图像. ...
tableView cell 中如果有文本框点击自动滚动不被键盘挡住
tableView cell 中如果有文本框点击自动滚动不被键盘挡住 tableView 是继承UIscrollView,所以自然有setContentOffset方法,该方法可以设置tableVie ...

html中怎么设置文本框居中显示图片,css如何让图片水平居中显示？

html中怎么设置文本框居中显示图片,css如何让图片水平居中显示？相关推荐

最新文章

热门文章