导航:首页 > 万维百科 > 网页设计图片居中代码

网页设计图片居中代码

 发布时间：2020-07-30 06:57:27

1、网页制作时怎样设置图片居中?急~~~~~~~~·

加入代码！
<body>
<center>
这里面是网页的内容

</center>
</body>

按以上做法就可以居中了!

2、HTML 如何让图片在浏览器里显示出居中的效果

<div align=center><img............></div>

3、网页制作怎么把图片居中

css属性align='center'

4、网页设计 背景图片怎么居中

垂直、水平

5、网页设计让图片居中

给id加个跟图片一样的宽度，然后用楼上的办法

6、网页设计中插入的图片怎么居中

一般现在来说，都是在CSS中控制的，比如给这个<img>定义一个ID为a,在css中这样写#a{text-algin:center}就ok了。如果是在软件用可视化开发的话，应该会有居中这个选项的

7、css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

一、css图片水平居中。

1、利用margin: 0 auto实现图片居中，就是在图片上加上css样式margin: 0 auto 如下：

2、设置imgBox的样式如下：

3、此时的效果如下：（图片在容器内，水平居中）

二、css图片垂直居中。

1、css代码如下，使用flex布局实现。

2、页面代码HTML如下：

3、此时的效果如下：（垂直居中）

三、 css图片水平垂直居中。

1、利用flex布局实现css水平垂直居中，设计css代码如下：

2、Html代码如下：

3、此时的效果如下：（水平垂直居中）

(7)网页设计图片居中代码扩展资料：

在容器上使用display: flex来告诉浏览器，这是一个flex布局的开始。然后给所有的item添加一个flex: 1的属性，来表明元素都是flex布局中的内容。

关于flex，最重要的就是要记住他有两条轴线（主轴、交叉轴），绝大部分属性都是依赖于轴线的方向。如下图所示：

这样，容器内的元素会沿着主轴来平分所有的区域，就这样已经实现了一个多列等宽布局。

8、在网页设计中怎么让背景图片水平居中

background-image:url(/images/bg.jpg); /*背景图片*/
background-repeat:no-repeat; /*背景图片不重复*/
background-position:center top; /*水平居中，垂直顶对齐*/

9、网页制作图片怎么居中

图片的宽度和高度是未知的，没有一个固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中，想想感觉还是挺麻烦的，由于最近的项目可能会用到这个方案，所以把一些常用的方法都收集整理了一下。

下图是理想中的效果图，外部容器的宽度和高度是固定的，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。

但是实际中实现的效果并不是很完美，由于各浏览器的解析都各不相同，所以各浏览器都会有1px-3px的偏差。

方法一 (XHTML 1.0 transitional)：

该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。

HTML结构部分：

<div id="box">
  <span><img src="images/demo.jpg" alt=""></span>
</div>

CSS样式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table;
text-align:center;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
display:table-cell;
vertical-align:middle;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
#box{
position:relative;
overflow:hidden;
}
#box span{
position:absolute;
left:50%;top:50%;
}
#box img{
position:relative;
left:-50%;top:-50%;
}
</style>
<![endif]-->

方法二 (XHTML 1.0 transitional)：

方法二和方法一的实现的原理大同小异，结构也是相同的，方法一用的是条件注释，方法二就用的CSS Hack。

CSS样式部分：

<style type="text/css">
#box{
width:500px;height:400px;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box span{
position:static;
*position:absolute; /*针对IE6/7的Hack*/
top:50%; /*针对IE6/7的Hack*/
}
#box img {
position:static;
*position:relative; /*针对IE6/7的Hack*/
top:-50%;left:-50%; /*针对IE6/7的Hack*/
border:1px solid #ccc;
}
</style>

该方法有个弊端，在标准浏览器下由于外部容器#box的显示模式为display:table-cell，所以导致#box无法使用margin属性，并且在IE8下设置边框也无效。

方法三 (XHTML 1.0 strict)：

标准浏览器还是将外部容器#box的显示模式设置为display:table-cell，IE6/IE7是利用在img标签的前面插入一对空标签的办法。

HTML结构部分：

<div id="box"><i></i><img src="images/demo.jpg" alt=""></div>

CSS样式部分：

<style type="text/css">
#box{
width:500px;height:400px;
display:table-cell;
text-align:center;
vertical-align:middle;
border:1px solid #d3d3d3;background:#fff;
}
#box img{
border:1px solid #ccc;
}
</style>
<!--[if IE]>
<style type="text/css">
#box i {
  display:inline-block;
  height:100%;
  vertical-align:middle
  }
#box img {
  vertical-align:middle
  }
</style>
<![endif]-->

方法三也同样适用XHTML 1.0 transitional。以上方法都是收集于网页教学网，暂时只对这3个方法比较满意，兼容性方面不错，使用起来的限制也比较小，还有些方法我也都一一测试过，效果都不理想，在各浏览器中的差异比较大。另外司徒正美这里也收集了一些方法。

10、HTML静态网页设计中，表格的背景图怎么像文字一样居中左对齐什么的，代码是什么

background:url(图片路径) left center no-repeat;背景图片X轴居左，Y轴居中，并且不平铺

与网页设计图片居中代码相关的知识