可以用“text-align”属性控制文字的位置,“center”属性值让文字居中显示。
1、新建html文档,在body标签中添加一个div标签,在div标签中添加p标签,这时文字将会在div标签中靠左显示:
2、为div标签设置“text-align”属性,属性值为“center”,这时文本将会居中显示:
3、如果想让文本靠右显示,可以为“text-align”属性设置“right”属性值,这时文本将会靠右显示:
方法一:
思路:利用text-align属性将水平居中,然后设置padding-top的值使其垂直居中。
结构如下:
<div>
<img
src="images/ttgif"
width="150"
height="100"
/>
</div>
CSS样式如下:
div
{width:300px;
height:150px;
background-color:#CCC;
border:#000
1px
solid;
text-align:center;
padding-top:50px;}
运行结果如下:
释义:
的尺寸为150x100px,DIV的大小为300x200px;
background-color:#CCC;
border:#000
1px
solid;为DIV加个边框和背景色,便于观察效果。
text-align:center,实现的水平居中;padding-top:50px,50px这个数值是经过计算得到的,padding-top的值具体算法如下:(DIV的高度
–
的高度)/2,但这里要注意,根据盒模型原理,我们还要将DIV原来的高度200减去padding-top的值,这样显示的才是正确的,否则DIV会变高。
方法二:
思路:只用padding属性,通过计算求得居中
结构代码同上;
CSS样式如下:
div
{width:225px;
height:150px;
background-color:#eee;
border:#000
1px
solid;
padding-top:50px;
padding-left:75px;}
备注:这里DIV的宽高计算都遵循盒模型原理,计算方法同上。
方法三:
思路:
利用的margin属性将水平居中,利用DIV的padding属性将垂直居中。
结构代码同上;
CSS代码如下:
div
{width:300px;
height:150px;
background-color:#eee;
padding-top:50px;
border:#000
1px
solid;}
img
{display:block;
margin:0
auto;}
备注:
Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0
auto;实现的水平居中;(有的设计师为再加个div标签,然后通过div标签的margin实现居中
思路:利用text-align属性将水平居中,然后设置padding-top的值使其垂直居中。
结构如下:
<div>
<img src="images/ttgif" width="150" height="100" />
</div>
CSS样式如下:
div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}
运行结果如下:
释义:
的尺寸为150x100px,DIV的大小为300x200px;
background-color:#CCC; border:#000 1px solid;为DIV加个边框和背景色,便于观察效果。
text-align:center,实现的水平居中;padding-top:50px,50px这个数值是经过计算得到的,padding-top的值具体算法如下:(DIV的高度 – 的高度)/2,但这里要注意,根据盒模型原理,我们还要将DIV原来的高度200减去padding-top的值,这样显示的才是正确的,否则DIV会变高。
方法二:
思路:只用padding属性,通过计算求得居中
结构代码同上;
CSS样式如下:
div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
备注:这里DIV的宽高计算都遵循盒模型原理,计算方法同上。
方法三:
思路:
利用的margin属性将水平居中,利用DIV的padding属性将垂直居中。
结构代码同上;
CSS代码如下:
div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img {display:block; margin:0 auto;}
备注:
Img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然后利用margin:0 auto;实现的水平居中;(有的设计师为再加个div标签,然后通过div标签的margin实现居中
1、首先,新建一个html文件。
2、在html文件上找<body>标签,在<body>标签中创建<div>标签并设置class类:
<div>
fixed浮动居中
</div>
3、对div设置基本属性。html文件找到<title>标签,在这个标签后新建一个<style>标签,然后在<style>标签里设置class类为fixed的属性为:宽为300像素,高为150像素,背景为红色,相对于浏览器窗口定位,距离浏览器顶部位置为20%。样式代码:
<style>
fixed{
width: 300px;
height: 150px;
background-color: red;
position: fixed;
top: 20%;
}
</style>
4、查看样式效果,保存html文件后使用浏览器查看设置的效果。
5、设置position:fixed 居中。为了给div自动居中显示,只需要在fixed类中再添加:
left: 0;
right: 0;
margin:0 auto;
6、查看居中效果。保存html文件后使用浏览器打开,就绝对居中了。
可以用“margin: 0 auto;”和“text-align: center;”是在网页中居中。
1、新建html文档,在body标签中添加div标签,然后在div标签中添加img标签:
2、为div标签添加“margin”属性,属性值是“0 auto”,这时div标签将会在网页中居中显示:
3、为div标签添加“text-align”属性,属性值是“center”,这时div标签内的img标签将会在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、这张仍然是居中的,没有收到父容器的影响。
1、首先,打开html编辑器,新建html文件,例如:indexhtml。
2、在indexhtml中的<style>标签中,输入css代码:span {position: absolute; top: 45px; left: 180px;}。
3、浏览器运行indexhtml页面,此时成功通过css设置了文字在上面居中显示。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)