在不同div中對齊不同大小的文本

我想了解在不同div類之間對齊不同大小類型的正確方法。現在，代碼強制較小的類型與較大類型的頂部對齊。如何使用最乾淨的代碼在同一排版基線上的所有div上對齊類型。這似乎很容易，但我找不到答案。我也希望這在語義上是正確的（我試圖創建一個響應的數據行，並可以在不同的設備上調整大小和重新排列（浮動））。所有的建議歡迎。在不同div中對齊不同大小的文本

Link to Demo

來源

2013-08-24 user2714240

請在這裏添加相關代碼部分 –

歡迎使用stackoverflow，請隨時在您的問題中添加相關代碼，並查看[爲什麼不應該只發佈一個鏈接到您的網站。]（http：/ /meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it） –

關於答案是令人愉快的，我們想知道我們是否幫助你 –

您需要調整行高也可能是垂直的利潤爲每個字體的大小，所以比賽的基線格。

我建議你閱讀本：http://coding.smashingmagazine.com/2012/12/17/css-baseline-the-good-the-bad-and-the-ugly/

來源

2013-08-24 21:56:57 Jeffpowrs

這非常有幫助。謝謝傑夫指着我朝着正確的方向前進。在你引用的文章中，「CSS line-height屬性沒有固有的基線概念，每行文本大致位於元素總高度的中間，這意味着你的文本的實際基準這就是說基線）跨越不同的風格和字體需要進一步手動，耗時的調整和像素微調。「 – user2714240

不客氣！有時不幸的是，它只是歸結爲試驗和錯誤。祝你好運！ – Jeffpowrs

聽起來像是你需要CSS」 line-height財產。這樣，你可以做出同樣的高度的文本行，但影響font-size分別

#artist { /* Selector to affect all the elements you want */ 
    color: #000; 
    font-size: 18px; /* Default font size */ 
    line-height:18px; /* Line height of largest font-size you have so none go */ 
         /* above the top of their container      */ 
}

Demo

來源

2013-08-24 21:56:38

調整，其中文本放置與填充和保證金來完成。但是對於這個設置，每個div的p類都會讓你控制其他文本。當然你的填充因你的字體變化而變化，因爲你有多種字體。小提琴http://jsfiddle.net/rnEjs/

#artist { 

    padding: 5px; 

    float: left; 

    width: 100%; 

    background-color: #036; 

    color: #000; 

    font-size: 18px; 

    overflow: hidden; 

} 

.genre { 

    width: 5em; 

    float:left; 

    height: 50px; 

    background-color: #09F; 

} 

.genre p { 

    padding:5px 5px; 

} 

.artistName { 

    float: left; 

    width: 175px; 

    height: 50px; 

    background-color: #F39; 

} 

.artistName p { 

     padding:5px 5px; 

} 

.birth { 

    float: left; 

    width: 5em; 

    height: 50px; 

    font-size: 12px; 

    background-color: #F90; 

} 

.birth p { 

    padding:15px 5px; 

} 

.medium { 

    float: left; 

    width: 10em; 

    height: 50px; 

    font-size: 12px; 

    background-color: #099; 

} 

.medium p { 

     padding:15px 5px; 

} 

.gallery { 

    float: left; 

    width: 10em; 

    height: 50px; 

    font-size: 12px; 

    background-color: #FF6; 

} 

.gallery p { 

    padding:15px 5px; 

} 

.website { 

    float: left; 

    width: 10em; 

    height: 50px; 

    font-size: 12px; 

    background-color: #99F; 

} 

.website p { 

     padding:15px 5px; 

} 


<div id="artist"> 
    <div class="genre"> 
     <p>Genre</p> 
    </div> 
    <div class="artistName"> 
     <p>Artist First Last</p> 
    </div> 
    <div class="birth"> 
     <p>birth year</p> 
    </div> 
    <div class="medium"> 
     <p>medium</p> 
    </div> 
    <div class="gallery"> 
     <p>gallery name</p> 
    </div> 
    <div class="website"> 
     <p>website</p> 
    </div> 
</div>

來源

2013-08-24 22:11:03 benny

我找到了一個很好的答案，從這個線程＃2你的問題：Why is vertical-align:text-top; not working in CSS。

它的要點如下：

瞭解塊和內聯元素之間的差異。塊元素是<div>，而內聯元素是<p>或<span>。
現在，vertical-align屬性僅適用於內聯元素。這就是爲什麼垂直對齊不起作用的原因。
使用Chrome開發工具，您可以修改演示並查看它的工作原理：具體來說，在<div>標籤內，將<span>標籤以適當的樣式放置。

來源

2013-08-24 22:41:19

在不同div中對齊不同大小的文本

回答

相關問題