|
lt;/ol>
<!--轮播广告内容-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/test8-1/Image1.png">
</div>
<div class="item">
<img src="img/test8-1/Image2.png">
</div>
<div class="item">
<img src="img/test8-1/Image3.png">
</div>
</div>
<!--左右箭头-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<pan class="sr-only">previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<pan class="sr-only">Next</span>
</a>
但是我们不单单满足这个实现，第一张图的文字我们不通过ps_cc来实现。那么怎么通过html+css来实现呢？
我首先想到的是“图层postion定位”
关键代码：
.s-pos-center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
css作用于文字<span>盒子里，两个特点：1.不必知道“宽高度”。2.它是一种图层的形式覆盖在父盒子上，且无视兄弟姐妹盒子。
同时也顺便复习其他的水平垂直居中方法，并作比较
第一种，通过text-align + line-height实现inline和inline-block元素的水平垂直居中（牛奶和果冻）
<style>
.s-lineheight-center{
text-align:center;
line-height:300px;
}
.test{
width:300px;
height:300px;
}
.test{
background:#5fc0cd;
}
.t-color-damage{
background:pink;
}
</style>
</head>
<body>
<div class="test s-lineheight-center"><span class="t-color-damage">元素</span>
<img src="img/test8-1/pic.png">
<p>block元素</p>
</div>
 结果显示css是作用于父盒子里，通过父盒子操作子元素水平垂直居中。
特点：
1.必须知道高度的准确数值，让盒子高度等于行框高度，实际上是元素底线重叠在父盒子的中线上。它是以牺牲上下行框，即牺牲父盒子的上下padding来实现的。所以img图片也没有实现居中效果。
2。里面要居中的子元素会彼此挤压，共同占据中间位置。3.不适合块元素。图中p标签脱离了test父盒子。
3.文字的中线重叠父盒子中线，img只是底线重叠父盒子中线。
所以一般是用于父盒子只有一行文字元素的的子元素垂直居中。
第二种，通过display：table-cell+text-align +vertical-align：middle实现三类元素的水平垂直居中（牛奶，果冻，坚果）
<style>
.s-lineheight-center{
display:table-cell;
text-align:center;
vertical-align: middle;
}
.test{
width:200px;
height:400px;
}
.test{
background:#5fc0cd;
}
.t-color-damage{
background:pink;
}
</style>
</head>
<body>
<div class="test s-lineheight-center">
<span class="t-color-damage">元素</span>
<img src="img/test8-1/pic.png">
<p>block元素</p>
<span>inlink</span>
</div>
 这种方法也是作用于父盒子div，通过三个css规范子元素位置。
特点：
1。高度调小时，子元素自适应高度，而且它本身有一个最小高度存在。同时父盒子的块元素虽然会换行，但是不会离开父盒子。（感觉宽高影响不大，不知道要不要高度。暂时是元素的内容宽高）
2。关于img居中的问题：（1。单独img时，可以实现水平垂直居中。2。img+快元素如p为子元素时，会以他们两的高的中线叠加在父盒子div的中线上。所以一般的书本+书名可以用这种方法实现。3。img+行内元素为子元素时，会以他们两的宽度的中线水平在父盒子div的中线上。行内元素的底线重叠img底线。效果就是文字位于img左下角或右下角。
第三种，通过display：flex+jc+ai 实现三类元素的水平垂直居中（牛奶，果冻，坚果）
|