位置兩個單詞相鄰css

我有一個快速問題給你，我知道它應該是簡單的東西...在這裏我有兩個標題（h1）。每個單詞都包含1個單詞，兩個單詞必須相鄰放置，就像一個普通的短語一樣，問題是我無法將它們居中。它們都應該完全像文件頂部和中間的標題。我使用它們都是因爲我想稍後使用GSAP或其他東西補間它們。位置兩個單詞相鄰css

.title{ 
    display: inline; 
    position: top center; 
    } 

#tr{ 
    position: left top; 
    margin-top: 0.02%; 
    color: lightgray; 
    size:18px; 
    } 

#si{ 
    position: right top; 
    margin-top: 0.02%; 
    color: lightgray; 
    size:18px; 
    } 
    //that's on .css side 

    //html 
    <h1 id='tr' class="title"> Winter </h1><h1 id='si' class="title">Day</h1>

此職位：top center;行不會以預定的方式影響文本。爲了說明你現在看起來像這樣：

| Winter day  |         |     |

*我剛剛放置的那些標記'|'沒有包含在項目中，只是爲了瞭解發生了什麼。

來源

2015-09-07 KDX2

這樣做將是把他們倆一個div裏面，它們顯示爲inline-block，並給text-align: center

HTML

<div class='centered-images'> 
    <h1 class='title'>Winter</h1> 
    <h1 class='title'>Day</h1> 
</div>

CSS

的DIV財產的最好方式

.centered-images { 
    text-align: center; 
} 

.title { 
    display: inline-block; 
    size: 18px; 
    color: lightgray; 
}

這是jsfiddle來演示。

來源

2015-09-07 22:19:28 asdf

哈，很詳細的答案，謝謝你......我已經習慣用CSS最後出發的是這樣的：d，再次感謝你，這很好的工作 – KDX2

@ KDX2沒問題，很高興爲你解決 – asdf

我確信我已經做對了，當你回答時，但它出現了答案沒有檢查，現在它更好:) – KDX2

這是我的解決方案：

<style type="text/css"> 
.title{ 
display: inline; 
position: top center; 
} 

#tr{ 
position: left top; 
margin-top: 0.02%; 
color: lightgray; 
size:18px; 
} 

#si{ 
position: right top; 
margin-top: 0.02%; 
color: lightgray; 
size:18px; 
} 
</style> 

<div style="text-align:center"> 
    <h1 id='tr' class="title"> Winter </h1><h1 id='si' class="title">Day</h1> 
</div>

來源

2015-09-07 22:24:27

位置兩個單詞相鄰css

回答

相關問題