混合居中對齊和左對齊有頂級的頁的儀表板中的HTML有以下要求設計：我如何在HTML

一切都應該在儀表板內垂直居中。
它應該在確切的中心有一個按鈕。
它應該有以25％和75％爲中心的文字。
它應該有最後一組文本到左邊。

這樣，但不可怕顏色：

我是能夠實現前三個目標（或非常接近），使用display: flex和一切給予適當的大小，像所以：

HTML：

<div class="header"> 
    <span class="left-text">LEFT TEXT</span> 
    <button class="button">BUTTON</button> 
    <span class="right-text">RIGHT TEXT</span> 
</div>

CSS：

.header { 
    position: absolute; 
    top: 55px; 
    height: 40px; 
    width: 100%; 
    background-color: beige; 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: center; 
} 

.button { 
    height: 26px; 
    width: 100px; 
    order: 2; 
    flex-grow: 0; 
} 

.left-text { 
    order: 1; 
    flex-grow: 1; 
    text-align: center; 
} 

.right-text { 
    order: 3; 
    flex-grow: 1; 
    text-align: center; 
}

儘管這最後一項要求真的讓我陷入循環，沒有一切都很好，居中，我覺得flex將需要一些醜陋的調整。我覺得如果我可以將div或span元素重疊在一起，但是我喜歡它，這樣會容易得多，但有些東西告訴我我不能。有沒有解決這個問題的好方法？我關門了嗎？

編輯：添加圖像的樣機。

來源

2015-11-30 TheSoundDefense

你能否給我們一個簡單的視覺模擬你想要達到的目標？ – hungerstar

我可以當我從午餐回來。 – TheSoundDefense

這裏有什麼問題https://jsfiddle.net/2Lzo9vfc/238/？ –

希望這會對你有用，基本上它增加了more-left類，並將它定位在相對於header的位置，並且根據需要將它移動到左側，無論是否合適。

HTML

<div class="header"> 
    <span class="more-left">MORE LEFT</span> 
    <span class="left-text">LEFT TEXT</span> 
    <button class="button">BUTTON</button> 
    <span class="right-text">RIGHT TEXT</span> 
</div>

CSS

.header { 
    position: absolute; 
    top: 55px; 
    height: 40px; 
    width: 100%; 
    background-color: beige; 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    justify-content: center; 
} 

.button { 
    height: 26px; 
    width: 100px; 
    order: 2; 
    flex-grow: 0; 
} 

.left-text { 
    order: 1; 
    flex-grow: 1; 
    text-align: center; 
} 

.right-text { 
    order: 3; 
    flex-grow: 1; 
    text-align: center; 
} 
.more-left { 
    position: relative; 
    left: 15%; /* adjust as neccessary */ 
}

來源

2015-11-30 19:16:22

我最終拋棄Flexbox的全部，爲了得到我想要的結果絕對定位和translate去。下面是最終代碼：

HTML

<div class="header"> 
    <span class="more-left v-center">MORE LEFT</span> 
    <span class="left-text abs-center">LEFT TEXT</span> 
    <button class="button abs-center">BUTTON</button> 
    <span class="right-text abs-center">RIGHT TEXT</span> 
</div>

CSS

.header { 
    position: absolute; 
    top: 55px; 
    height: 40px; 
    width: 100%; 
    background-color: beige; 
} 

.v-center { 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

.h-center { 
    position: absolute; 
    -webkit-transform: translateX(-50%); 
    -moz-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    -o-transform: translateX(-50%); 
    transform: translateX(-50%); 
} 

.abs-center { 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translate(-50%,-50%); 
    -moz-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    -o-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%); 
} 

.button { 
    height: 26px; 
    width: 100px; 
    left: 50%; 
} 

.more-text { 
    left: 10px; 
} 

.left-text { 
    left: 25%; 
} 

.right-text { 
    left: 75%; 
}

編輯：它發生，我認爲你不能真正結合v-center和h-center，因爲一個transform條目將完全覆蓋另一個，而不是將它們組合在一起。因此abs-center類。

來源

2015-12-16 16:16:34 TheSoundDefense

我如何在HTML

回答

HTML

CSS

相關問題