本文目录
- 怎样用css只让div中的图片居中
- css 样式里面怎么让一个DIV居中
- CSS怎样让一个div居中
- 如何在css中让div中的P标签居中，
- div+css 怎么让一个小div在另一个大div里面 垂直居中
- css设置div整体居中
- css 里面怎么让一个DIV居中
- Div+Css如何实现整体居中
- CSS中怎么让DIV居中亲自实验得出的结论
- Css使Div自适应居中
怎样用css只让div中的图片居中
1、打开在线写前端代码的网站如jsrun或者jsfiddle。
目2、标是做一个如图所示的效果，不同大小的图片。
3、每个方框的html 如下，
《div》
《span》
《img src=’图片地址’》
《/img》
《/span》
《/div》
4、css如下，其中需要注意的是，不要设置最外层div的大小，只设置span的大小，让span的大小决定div的大小。
其中
display: table-cell;
text-align: center;
vertical-align: middle;
这3行决定居中效果。
其中
img {
max-width: 100%;
max-height: 100%;
}
的目的是让图片可以缩放而比例不变。
div {
float:left;
margin:5px;
padding:5px;
border:1px solid #000;
}
span {
font-size: 0;
width: 150px;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
5、效果如下，很好的实现居中。
6、上面是div为float的情况
div如果是absolute或fixed也可以正常表现。
只有一个div的情况下，代码如下
《div》
《span》
《img src=’图片地址’》
《/img》
《/span》
《/div》
div {
margin:5px;
padding:5px;
border:1px solid #000;
position: absolute;
left:100px;
top:100px;
}
span {
font-size: 0;
width: 150px;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
img {
max-width: 100%;
max-height: 100%;
}
7、这张图片仍然是居中的，没有收到父容器的影响。
css 样式里面怎么让一个DIV居中
通常的方法为：先设置div的宽度，然后使用如下样式：
margin: 10px auto; /* 上下边距10px，左右边距自动以达到左右居中的目的*/
以下为示例：
HTML代码中给出div
《div class=“outer“》《div class=“content“》《/div》《/div》
添加样式
/*外层边框*/div.outer{width:200px;height:150px;border:1px solid green;}div.content{width:100px;height:50px; /*设置大小*/margin:20px auto; /*设置左右边距自动以使其居中*/border:1px solid red;}
显示效果
CSS怎样让一个div居中
第一种方式:设置body居中。在CSS中的代码是(body{text-align:center;})第二种方式:用盒子模型，首先设置一个Div，这个DIV的宽度为100%，然后在这个DIV居中，那么在这个DIV中加的内容就居中显示，代码如下:《divclass=“div1“》《divclass=“div2“》《/div》《/div》CSS样式代码:《styletype=“text/css“》.div1{text-align:center;width:100%;}.div2{width:980px;background:red;}//为了看清效果，加了背景颜色《/style》第三种方式:margin:0auto;
如何在css中让div中的P标签居中，
1、首先新建一个html文件，命名为test.html，在test.html文件内，在div内，使用p标签创建一行文字，用于测试。
2、然后在test.html文件内，设置div标签的class属性为mydiv。
3、接着在css标签内，通过class设置div标签的样式，定义它宽度为200px，高度为100px，背景颜色为灰色。
4、在css标签内，再使用text-align属性设置div里面内容的居中方式，例如，这时设置为center居中方式。
5、最后在浏览器打开test.html文件，查看实现的效果，在css中让div中的P标签居中就完成了。
div+css 怎么让一个小div在另一个大div里面 垂直居中
方法一、小div绝对定位或相对定位，这样小div脱离标准流，大div有固定宽高，用小div的margin去挤大div
《!DOCTYPE html》
《html》《head》《meta charset=“UTF-8“》《title》Title《/title》《style》
.father{
width: 600px;
height: 600px;
background-color: orangered;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
position: absolute;
margin: 200px 150px;
}
《/style》《/head》《body》《div》《div》《/div》《/div》《/body》《/html》
注意：如果小div没有绝对定位或相对定位，且大div没有border，那么小div的margin实际上踹的是“流”，踹的是这“行”。如果用margin-top，大div整体也掉下来了。如下：
方法二、如果给大div加一个border，使大div，小div都不定位，用小div的margin去挤大div，实现小div居中。
《!DOCTYPE html》
《html》《head》《meta charset=“UTF-8“》《title》Title《/title》《style》
.father{
width: 600px;
height: 600px;
background-color: orangered;
border: 1px solid white;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
margin: 200px 150px;
}
《/style》《/head》《body》《div》《div》《/div》《/div》《/body》《/html》
显示结果如下：
方法三、小div绝对定位，大div相对定位，定位到大盒子的宽高一半的位置，再上下各margin负的自己宽高的一半
《!DOCTYPE html》
《html》《head》《meta charset=“UTF-8“》《title》Title《/title》《style》
.father{
width: 600px;
height: 600px;
background-color: orangered;
position: relative;
}
.son{
width: 300px;
height: 200px;
background-color: lawngreen;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}
《/style》《/head》《body》《div》《div》《/div》《/div》《/body》
《/html》
显示结果如下：
扩展资料：
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。工程上，“子绝父相”有意义，父亲元素没有脱标，儿子元素脱标在父亲元素的范围里面移动。
绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。
display:inline和display:inline-block，会使margin:0 auto;失效。
固定宽度的盒子才能使用margin:0 auto;居中
css设置div整体居中
你好，可以通过margin或padding来实现，如下
水平居中：margin: 0 auto;
垂直居中：margin-top: 50%; 这个值根据具体情况而定
也可以通过定位的方式来固定位置
css 里面怎么让一个DIV居中
第一种方式：设置body 居中。在CSS中的代码是（body{text-align:center;}）第二种方式：用盒子模型，首先设置一个Div ，这个DIV的宽度为100%，然后在这个DIV居中，那么在这个DIV中加的内容就居中显示，代码如下：《div class=“div1“》《div class=“div2“》《/div》《/div》CSS 样式代码：《style type=“text/css“》.div1{text-align:center;width:100%;}.div2{width:980px;background:red;} //为了看清效果，加了背景颜色《/style》第三种方式：margin：0 auto；
通常的方法为：先设置div的宽度，然后使用如下样式：
1margin: 10px auto; /* 上下边距10px，左右边距自动以达到左右居中的目的*/以下为示例：
HTML代码中给出div
123 《div class=“outer“》 《div class=“content“》《/div》《/div》添加样式
1234567 /*外层边框*/div.outer{width:200px;height:150px;border:1px solid green;}div.content{ width:100px;height:50px; /*设置大小*/ margin:20px auto; /*设置左右边距自动以使其居中*/ border:1px solid red;}显示效果
Div+Css如何实现整体居中
主要的样式定义如下： body{TEXT-ALIGN:center;} #center{MARGIN-RIGHT:auto;MARGIN-LEFT:auto;} 说明： 首先在父级元素定义TEXT-ALIGN:center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。 解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT:auto;MARGIN-LEFT:auto;” 需要说明的是，如果想用这个方法使整个页面要居中，建议不要套在一个DIV里，可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT:auto;MARGIN-LEFT:auto;就可以了。
CSS中怎么让DIV居中亲自实验得出的结论
CSS如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align:center然后嵌套一层DIV来解决问题.可是事实上这样的方法科学吗?经过网络搜索和亲自实验得出以下结论:正确的也是对页面构造没有影响的设置如下:对需要水平居中的DIV层添加以下属性: 复制代码代码如下:margin-left:auto;margin-right:auto;经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.问题到底出在哪里呢?感谢网友乐天无用帮忙找出了这个邪门问题的原因.原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.问题并不在CSS而在XHTML网页本身.需要加上这样的代码才能使得上述设置有效果:《!DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN““CSS+DIV控制页面中元素垂直居中代码全局和区域垂直居中复制代码代码如下:《styletype=“text/css“media=screen》body{text-align:center;}#a{width:200px;height:400px;background:#000;}#b{margin-top:expression((a.clientHeight-50)/2);width:50px;height:50px;background:#FFF;}#c{position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50px;height:50px;background:#F00;}《/style》《divid=“a“》《divid=“b“》《/div》《/div》《divid=“c“》《/div》另一方法:复制代码代码如下:《divstyle=“background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50“》《/div》
Css使Div自适应居中
在布局一张网页时，通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中与浏览器中需要一个条件和一个设置。假如最外层DIV盒子的CSS命名为“#divcss5”，这个时候为了兼容各大浏览器实现最外层的这个盒子居中。
条件：这个时候对“body”设置css内容居中样式（text-align:center）即CSS代码：
body{text-align:center}
设置：这个时候对“#divcss5”设置居中必备样式css margin 即CSS代码：
#divcss5{margin:0 auto}
扩展资料
CSS DIV技巧
1、css font的简写规则：
当我们写字体样式的时候，我们也许会这样子写
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif
其实，这样写是完全多余的，我可以只用font 来写就OK了。
比如：font: 1em/1.5em bold italic small-caps verdana,serif
2、把几个class属性写在一起
通常情况写，属性里面的class只有一个值，但这并不是意外着你只能给它
赋一个class名，我们可以赋2个以上。比如
《p class=“text side“》...《/p》
不过，需要注意的是，class里面是用空格把他们分开来的，而不是“，”，这点需要注意一下。这样运用了，那么text和side的class 就会运用到p元素中。