從左側對齊垂直文本

我有一個網頁，我想從左側垂直對齊我的文本，從右側對齊。以下是我在js小提琴中的代碼：https://jsfiddle.net/r1uoyks6/ 我試過了幾個CSS財產如vertical-aligntext-alignfloat:clear。但未能實現結果。我不得不<br/>將<p>置於彼此之下。已付款display:inline-block財產但沒有成功。從左側對齊垂直文本

.taker { 
 
    margin-top: 3em; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.teacher { 
 
    margin-left: 4.0em; 
 
    margin-top: 7em; 
 
    clear: left; 
 
    float: right; 
 
} 
 

 
.teacher_name { 
 
    margin-left: 4.0em; 
 
    margin-top: -1.5em; 
 
    vertical-align: middle; 
 
    float: right; 
 
    display: inline-block; 
 
}

<div class="taker"> 
 
    <p class="teacher">Submitted To,</p><br/> 
 
    <p style="vertical-align:right;" class="teacher_name">Dr. N M Golam Zakaria</p><br/> 
 
    <p style="vertical-align: right;" class="teacher_name">Professor</p><br/> 
 
    <p style="vertical-align: right;" class="teacher_name">BUET</p><br/> 
 
</div>

來源

2017-09-03 Asm Arman

你是什麼意思與「縱向從左側」？ – andreas

我認爲你試圖對齊文本*水平*，而不是垂直。因此，首先刪除所有「垂直對齊」樣式，因爲它們什麼都不做。由於'.teacher'和'.teacher_name'中的'float：right'，所以文本被排列在右邊，所以也要刪除它們 - 看起來沒有必要浮動這些。 – FluffyKitten

你可以試試這個代碼，並始終使用text-align屬性。

.taker { 
 
    margin-top: 3em; 
 
    display: inline-block; 
 
} 
 

 
.teacher { 
 
    margin-left: 4.0em; 
 
    margin-top: 7em; 
 
    text-align: left; 
 
} 
 

 
.teacher_name { 
 
    margin-left: 4.0em; 
 
    margin-top: -1.5em; 
 
    text-align: left; 
 
    display: inline-block; 
 
    float:left; 
 
}

<div class="taker"> 
 
    <p class="teacher">Submitted To,</p><br/> 
 

 
    <p class="teacher_name">Dr. N M Golam Zakaria</p><br/> 
 
    <p class="teacher_name">Professor</p><br/> 
 
    <p class="teacher_name">BUET</p> 
 
</div>

來源

2017-09-03 11:08:43

非常感謝，現在正在工作。 –

沒有左側垂直對齊。 – andreas

值right不CSS存在vertical-align。也許你的意思是text-align？否則see MDN的允許值爲vertical-align。

我已經從CSS中刪除了所有浮動，定位和對齊規則，以便文本（默認情況下）左對齊。這是你想要的嗎？

.taker { 
 
    margin-top: 3em; 
 
    display: inline-block; 
 
} 
 

 
.teacher { 
 
    margin-left: 4.0em; 
 
    margin-top: 7em; 
 
    vertical-align: middle; 
 
} 
 

 
.teacher_name { 
 
    margin-left: 4.0em; 
 
    margin-top: -1.5em; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
}

<div class="taker"> 
 
    <p class="teacher">Submitted To,</p> 
 
    <br/> 
 
    <p class="teacher_name">Dr. N M Golam Zakaria</p> 
 
    <br/> 
 
    <p class="teacher_name">Professor</p> 
 
    <br/> 
 
    <p class="teacher_name">BUET</p> 
 
    <br/> 
 
</div>

來源

2017-09-03 10:37:36 andreas

謝謝，它像魔術一樣工作！ –

從左側對齊垂直文本

回答

相關問題