*{
padding:0;
margin:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
figure{
position:relative;
left: 100px;
top: 100px;
width:200px;
height:200px;
border:4px solid #ccc;
}
img{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
figcaption {
text-align: center;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
position: absolute;
left: -100px;
top: 60px;
width: 150px;
height: 20px;
}
标记
<figure>
<img src="http://www.disney.co.uk/brave/common/images/characters/merida.png" />
<figcaption>Here is some text</figcaption>
</figure>
演示:http: //jsfiddle.net/NeeXm/