將圖像旁邊的垂直文字對齊

我正在嘗試創建與下圖中所示內容完全相同的內容。到目前爲止，這對我來說並不好看。將圖像旁邊的垂直文字對齊

這裏的的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框架。

來源

2017-07-04 Elaine Byene

您可以更改.services__text的定位，然後在image之前使用translate對齊。

.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>

來源

2017-07-04 05:06:40 frnt

當標題長度超過'Title Text Here'時，對齊關閉。當它更短時。 – AJMaxwell

@AJMaxwell檢查此jsFiddle https://jsfiddle.net/yLvvnr56/，這是真的需要添加寬度。service__text，以便它保持文本在相同的位置，並且可以根據需要添加，但是我已經添加了隱藏在父元素中的溢出，所以當您在提供的jsFiddle中縮放時，您會看到文本的某些部分被隱藏，因此要將它同一位置在某個屏幕分辨率下OP需要使用媒體查詢。現在有兩種方法可以做到這一點，無論是負面的左轉還是翻譯的建議。大多數翻譯對旋轉元素的效果很好。 – frnt

添加以下代碼中的CSS屬性.service_text類

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

，並添加一個類你class="col-xs-4"爲class="col-xs-4 parent" 而對於parent添加以下CSS。 position: relative; padding-left: 8px;

這將給出完全相同的結果。如果你想進一步的解釋，我很樂意幫助你

來源

2017-07-04 05:17:13 Puneet

這種方法將適用於任何長度的文本（只要它是一條線）。

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

來源

2017-07-04 05:22:05 AJMaxwell

嘿冠軍，你可以解決您的用下面的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>

問題

來源

2017-07-04 10:28:31

謝謝。我已經使用rnt給出的代碼:) –

將圖像旁邊的垂直文字對齊

回答

相關問題