CODEWITHSUNDEEP
css
Evanss
Evanss

Reputation: 23583

Position CSS rotated text to left of image?

Here is my site: http://smartpeopletalkfast.co.uk/4/test

Im rotating text with CSS. I want the text to sit to the left of the image:

enter image description here

Note ive only added the webkit prefix for the css at the moment. So this is my rough div structure and CSS. 

<div>
 <img src="whatever.jpg" />
 <p>Here is some text</p>
</div>

p {
                margin: 0;
                text-align: center;
                -webkit-transform: rotate(-90deg);
            }

Upvotes: 1

Views: 248

Answers (2)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

 *{
    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;
 }

the markup

<figure>
    <img src="http://www.disney.co.uk/brave/common/images/characters/merida.png" />
    <figcaption>Here is some text</figcaption>
</figure>

demo : http://jsfiddle.net/NeeXm/

Upvotes: 1

tcak
tcak

Reputation: 2212

You can set position to absolute. After that play with left and top values to bring it to left middle position.

Upvotes: 0

Related Questions