在圖像旁邊對齊垂直文本

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; 將文本推到圖像的外部（可能與其他元素重疊）