对齐图像旁边的垂直文本

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对齐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>