css设置图片(css设置图片居中)

css设置图片居中

很多新手在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况，我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢？其实这种情况解决的办法也是有很多种，js，css都可以实现。这里主要介绍一下采用css的方法，有什么问题还请各位看官指出。

方法一：用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。html如下：

XML/HTML Code复制内容到剪贴板

<div class="block" style="height: 300px;">  

    <div class="centered">  

        <h1>haorooms案例题目</h1>  

        <p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>  

    </div>  

</div>  

css如下：

CSS Code复制内容到剪贴板

/* This parent can be any width and height */  

.block {   

  text-align: center;   

}   

/* The ghost, nudged to maintain perfect centering */  

.block:before {   

  content: "";   

  display: inline-block;   

  height: 100%;   

  vertical-align: middle;   

  margin-right: -0.25em; /* Adjusts for spacing */  

}   

/* The element to be centered, can  

   also be of any width and height */    

.centered {   

  display: inline-block;   

  vertical-align: middle;   

  width: 50%;   

}  

方法二：可以用table布局方法，但是这种方法也有局限性！写法如下：

XML/HTML Code复制内容到剪贴板

<table style="width: 100%;">  

  <tr>  

     <td style="text-align: center; vertical-align: middle;">  

          Unknown stuff to be centered.   

     </td>  

  </tr>  

</table>  

由于table写法比较费时，你也可以用div代替table,写法如下：html：

XML/HTML Code复制内容到剪贴板

<div class="something-semantic">  

   <div class="something-else-semantic">  

       Unknown stuff to be centered.   

   </div>  

</div>  

css:

CSS Code复制内容到剪贴板

.something-semantic {   

   display: table;   

   width: 100%;   

}   

.something-else-semantic {   

   display: table-cell;   

   text-align: center;   

   vertical-align: middle;   

}  

方法三，终极解决方法：以上2中方法可能都有其局限性，我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法！但是方法是css3的写法，想兼容IE8的童鞋们，建议用上面的方法！方法和我们固定高宽的差不多，但是不用margin我们用的是 translate()demo如下：

CSS Code复制内容到剪贴板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   

<head>   

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">   

    <title>haorooms不固定高度div写法</title>   

    <style>   

.center {   

  position: fixed;   

  top: 50%;   

  left: 50%;   

  background-color: #000;   

  width:50%;   

  height: 50%;   

-webkit-transform: translateX(-50%) translateY(-50%);   

}   

    </style>   

</head>   

<body>   

    <div class="center"></div>   

</body>   

</html>  

我上面的css只是针对webkit内核的浏览器，其他内核浏览器写法如下：

CSS Code复制内容到剪贴板

-webkit-transform: translateX(-50%) translateY(-50%);   

-moz-transform: translateX(-50%) translateY(-50%);   

-ms-transform: translateX(-50%) translateY(-50%);   

transform: translateX(-50%) translateY(-50%);  

有些弹出层的样式，也可以用这个方法居中

CSS Code复制内容到剪贴板

position: fixed;   

top: 50%;   

left: 50%;   

width: 50%;   

max-width: 630px;   

min-width: 320px;   

height: auto;   

z-index: 2000;   

visibility: hidden;   

-webkit-backface-visibility: hidden;   

-moz-backface-visibility: hidden;   

backface-visibility: hidden;   

-webkit-transform: translateX(-50%) translateY(-50%);   

-moz-transform: translateX(-50%) translateY(-50%);   

-ms-transform: translateX(-50%) translateY(-50%);   

transform: translateX(-50%) translateY(-50%);  

无固定高度的div垂直居中代码要点：父容器vc的css属性 display:table;overflow:hidden;子容器vci的css属性 vertical-align:middle;display:table-cell;针对ie6的hack，vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;

css怎么图片居中

css使div背景图片填充的具体操作步骤如下：

1、我们首先打开前端开发工具，新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = "bg-img"。

3、设置背景图片，创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面，在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。

css中图片居中怎么设置

可以使用margin 0 auto进行居中，或者使用绝对定位，再使用边定位至中间

css如何设置图片居中

html中使图片居中的代码是：<img src="" alt="" align="center" />

怎样让html中的img标签居中显示？

1、首先我们需要打开电脑，找到DW软件的快捷键，双击打开之后，新建一个html页面。

2、然后我们会进入到DW的HTML页面的编辑页面，我们需要将新建的html页面进行一个保存。

3、将网页保存好之后，我们需要重新回到DW的编辑页面。

4、然后我们需要在body部分新建一个div标签，并在其中插入一张img图片。并给div添加简单的css样式。

5、然后我们在浏览器中查看效果，可以发现图片是默认左对齐的，并没有在div的正中央显示。

6、此时为图片添加居中属性也是没有用的，我们需要将图片套在一个p或者span标签中，给标签添加一个text-align:center属性。

css设置图片居中对齐

1、打开Dreamweaver工具，并新建html页面。

2、切换到编写代码的界面。

3、编写代码如下：<div><img src="images/1.jpg" width="20px" height="20px">我是文字</div>

4、预览页面如下图，我们可以看到图片和文字并没有对齐，那么我们在img标签中添加样式。

5、代码如下：

6、预览html页面，可以看到已经下面对齐了

css设置图片居中属性

在style里加,如在div里居中 <div style="text-align:center;">我的内容我的内容我的内容我的内容我的内容</div> 你也可以添加center，如 <center>这里是你的内容，可以是标签或别的</center>

css怎样让图片居中

1、打开前端开发工具，新建一个html代码页面

2、在html代码页面上创建一个用于设置背景颜色的div标签，然后给这个标签添加上class = "bg-img"

3、设置背景图片。创建style标签，然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。样式代码：.bg-img{height: 100vh;width: 100%;background-image: url(img/car.jpg);background-repeat: no-repeat;}

4、保存html代码，使用浏览器打开，这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面，在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器，这个时候会发现浏览器上的背景图片已经自动居中了。

css设置照片居中

1、首先我们创建一个父层div，然后定位为position:relative；

2、其次我们创建img和span标签；

3、接着img宽高为父级元素宽高；

4、紧接着span定位为position:absolute，并设置left和top为50%，再设置margin为宽高的一半实现居中。

就这样，在css中让文字显示在图片上居中了。

css怎么让图片居中

1、新建一个html文件，命名为test.html，用于讲解在css中字体怎么放在图片中间。

2、在test.html文件内，使用div标签创建一个模块，并设置其class属性为aa，主要用于下面通过该class来设置css样式。

3、在test.html文件内，在div标签内，使用p标签创建一行文字。

4、在test.html文件内，编写<style type="text/css"></style>标签，页面的css样式将写在该标签内。

5、在css标签内，使用“*”来初始化页面html元素的内外边距都为0。同时，对div进行样式设置，定义div的宽度为500px，高度为400px，背景图片为b.jpg。

6、在css标签内，对div内的p元素进行样式设置，定义其水平方法居中对齐，行高等于div的高度，字体颜色为蓝色。

7、在浏览器打开test.html文件，查看实现的效果。

css设置图片居中代码

一般来说可以用CSS中的“text-align:center属性，margin:0 auto或定位属性”就可以居中。但是主要看是看你的页面布局是怎样的，是否用了定位1、img标签中的align属性不是定义图像的位置，而是定义图像与周围文字的位置，并且不推荐使用这个属性。2、要给img定义一个父标签，让这个父标签里面的内容居中，那么img自然就居中了。比如说：<p align="center">img……</p>