在图像旁边对齐垂直文本

Question

I'm trying to create exactly like what is shown in the picture below. So far, it's not looking good for me.

Here's the JSFiddle: https://jsfiddle.net/6o3nz6g9/

HTML:

<h1>This is Sparta!</h1>
<div class="container">
<div class="row">
    <div class="col-xs-4">
        <div class="services__text">Title Text Here</div>
        <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt=""/>
    </div>
    <div class="col-xs-4">
        <div class="services__text">Title Text Here</div>
        <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt=""/>
    </div>
  <div class="col-xs-4">
        <div class="services__text">Title Text Here</div>
        <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt=""/>
    </div>
</div>
</div>

CSS:

.services__text {
    -ms-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform-origin: right top 0;
    -moz-transform-origin: right top 0;
    -webkit-transform-origin: right top 0;
    transform-origin: right top 0;
    padding: 10px;
    float: left;
}

How do I do to get this desired effect? FYI: I'm working on Bootstrap framework.

Answer 1

You can change positioning of .services__text and then using translate align that before image .

 .services__text { position: absolute; left: 0; top: 0; transform: rotate(-90deg) translate(-40%, -200%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <h1>This is Sparta!</h1> <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="services__text">Title Text Here</div> <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> </div> <div class="col-xs-4"> <div class="services__text">Title Text Here</div> <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> </div> <div class="col-xs-4"> <div class="services__text">Title Text Here</div> <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> </div> </div> </div> 

Answer 2

Hey Champ, You may solve your problem with following CSS

 .services__text { position: absolute; text-align: right; -moz-transform: rotate(-90deg) translate(-100%, -100%); -webkit-transform: rotate(-90deg) translate(-100%, -100%); -o-transform: rotate(-90deg) translate(-100%, -100%); -ms-transform: rotate(-90deg) translate(-100%, -100%); transform: rotate(-90deg) translate(-100%, -100%); -ms-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <h1>This is Sparta!</h1> <div class="container"> <div class="row"> <div class="col-xs-4"> <div class="services__text">Title Text Here</div> <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> </div> <div class="col-xs-4"> <div class="services__text">Title Text Here</div> <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> </div> <div class="col-xs-4"> <div class="services__text">Title Text Here</div> <img src="https://image.ibb.co/hccDVF/sample.jpg" class="img-responsive" alt="" /> </div> </div> </div> 

Answer 3

Add following css properties in your code for class .service_text

top:20px;  left:-126px;  position:absolute;

And add a class to your class="col-xs-4" as class="col-xs-4 parent" And for parent add following css. position: relative; padding-left: 8px;

This will give exactly same result. And if you want further explanation i would love to help you on that

Answer 4

This method will work with any length of text (so long as it's a single line).

.services__text {
    position:absolute;
    transform: rotate(-90deg) translate(-100%);
    transform-origin: left top;
    width:100%;
    left:-8px;
    text-align:right;
}

• translate(-100%) moves the elements new position -100% of its width to its left (down).
• width:100%; gives your title room to expand. This the elements height .
• text-align:right; pushes the text to the top of the image
• position:absolute; & left:-8px; pushes the text to the outside of the image (possibly overlapping other elements)