左側和右側有流體隔板的居中固定寬度的隔板？

我正在wordpress網站上工作。
我有構造這樣這些裝飾標題：
（下面是不是真正的HTML結構，它只是作爲例子的目的）左側和右側有流體隔板的居中固定寬度的隔板？

<div class="decoration-left"> <div class="title"> <div class="decoration-right">

.title僞內部具有H1標題。
.decoration-left，.decoration-right，是空白的div，帶有裝飾背景。
我需要標題始終居中。

我第一次嘗試給所有三個div的寬度爲33.3％，這在大屏幕上效果很好，但是當我縮小窗口時，標題分成兩行，看起來很醜。因此我需要標題具有恆定的寬度。我不希望文字變小。

現在，我有.title div與「寬度：自動」，它工作正常。但是我需要左右裝飾隔間以響應/流暢的方式將剩餘空間中的每一個都拿走。

附加圖片以獲得更好的解釋。

enter image description here

來源

2014-05-17 user2324238

我的猜測是：把你的DECORATIVE div放到TITLE div裏面，把你的TITLE div放在WRAP div裏面。將'TITLE div'設置爲'position：relative;顯示：內聯塊;背景：#FFF;」裝飾的'位置：絕對;左：-50px;」和'position：absolute;右：-50px;'，WRAP和'text-align：center;背景：網址（LINE IMAGE LINK）center repeat-x;'。

我知道這很難理解，但我確信它會以這種方式工作。我會盡力使它看起來通過編碼一些更好：

HTML：

<div class="title-warpper"> 
<div class="title"> 
    <div class="decoration-left"></div> 
    <span>YOUR TITLE HERE</span> 
    <div class="decoration-right"></div> 
</div> 
</div>

CSS：

div.title-wrapper { 
background:url(LINE IMAGE LINK) center repeat-x; 
text-align: center; 
} 
div.title { 
position:relative; 
background:#fff; 
display:inline-block; 
} 
div.decoration-right{ 
position:absolute; 
right:-25px; 
background:url(DECORATION BG LINK); 
width:25px; 
height:25px; 
} 
div.decoration-left{ 
position:absolute; 
left:-25px; 
background:url(DECORATION BG LINK); 
width:25px; 
height:25px; 
}

我設置了裝飾的div爲25像素，而是用你所需要的。請記住調整它們以及左右屬性以適應您的需求。

來源

2014-05-18 00:02:30 Eduardo

，如果你不介意的標題上的一些屏幕尺寸重疊裝飾div的，那麼你可以絕對位置裝飾的div

position:absolute; 
left:0px; (OR right:0px;)

給他們任何你喜歡的寬度和高度。

來源

2014-05-17 23:02:55 KnightHawk

左側和右側有流體隔板的居中固定寬度的隔板？

回答

相關問題