在图像旁边对齐垂直文本

Question

我正在尝试完全按照下图所示创建内容。 到目前为止，对我来说还不好。

这是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;
}

我该如何取得理想的效果？ 仅供参考：我正在研究Bootstrap框架。

Answer 1

您可以更改.services__text位置，然后使用translate align 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

嗨，冠军，您可以通过以下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

在代码中为类.service_text添加以下CSS属性

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

并将一个类作为class="col-xs-4 parent"添加到您的class="col-xs-4" ，并为parent添加以下CSS。 position: relative; padding-left: 8px;

这将给出完全相同的结果。 如果您想进一步解释，我很乐意为您提供帮助

Answer 4

此方法适用于任何长度的文本（只要是一行）。

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

• translate(-100%)将元素的新位置移动到其宽度的100％左（下）。
• width:100%; 让您的标题空间扩大。 这个元素的高度 。
• text-align:right; 将文本推到图像顶部
• position:absolute; ＆ left:-8px; 将文本推到图像的外部（可能与其他元素重叠）