CSS在圖像上水平排列文字

我不知道這是否可行，但可變文字長度的<span>是否可以在圖像上水平對齊？有一個與此相關的是，我希望<span>具有背景色，背景顏色塊應與圖像重疊。CSS在圖像上水平排列文字

我試過將<span>設置爲display:inline-block，但它似乎並沒有水平對齊。這裏是如果你不想在小提琴看（這裏的HTML應該是一樣的，如果不惜一切-可能）

守則（https://jsfiddle.net/6c9gmvom/1/）代碼：

#wrapper { 
 
    width:100%; 
 
} 
 
.txt { 
 
    text-align:center; 
 
    margin:0 auto; 
 
    width:40px; /* ideally I would not want to use a fixed width here */ 
 
    background-color:#ffffff; 
 
} 
 
img { 
 
    height:30px; 
 
    width:100%; 
 
}

<div id="wrapper"> 
 
    <img src="http://seedmagazine.com/slideshow/the_long_shot/img/8_the_long_shot_ss.jpg"> 
 
    <div id="modulewrapper"> 
 
    <span class="txt">hey</span> 
 
    <div id="module"></div> 
 
    </div> 
 
</div>

來源

2016-08-24 Zac

您可以設置圖片爲背景圖像...然後設置跨度顯示塊.....

#wrapper { 
 
    width:100%; 
 
} 
 
.txt { 
 
    text-align:center; 
 
    margin: 10px auto; 
 
    background-color:#ffffff; 
 
    display: block; 
 
    text-align: center; 
 
} /* ideally I would not want to use a fixed width here */ 
 
img { 
 
    height:30px; 
 
    width:100%; 
 
} 
 

 
#modulewrapper { 
 
    padding: 200px 0; 
 
background: url(http://seedmagazine.com/slideshow/the_long_shot/img/8_the_long_shot_ss.jpg) no-repeat center center; }

<div id="wrapper"> 
 
    <div id="modulewrapper"> 
 
    <span class="txt">hey</span> 
 
    <div id="module"></div> 
 
    </div> 
 
</div>

來源

2016-08-24 19:49:06 Scott

謝謝你，但我試圖讓「哎」重疊的圖像，如「嘿」將坐在在圖像 – Zac

@Zac答案更新......除非有某種原因背景圖像是不可接受的。 – Scott

非常感謝，這是@ xxxmatko的答案，我正在尋找的影響。我實際上一直在複製你的snippit顯示的內容（我不希望背景橫跨整個圖像） – Zac

您可以將它與css對齊。我已經更新了你的撥弄，檢查出來看到的結果https://jsfiddle.net/6c9gmvom/8/

我已經添加了CSS是：

#wrapper { 
    width:100%; 
    position: relative; 
} 
#modulewrapper { 
    text-align:center; 
    position: absolute; 
    top:0; 
    left:0; 
    right:0; 
}

來源

2016-08-24 19:49:34 xxxmatko

如果.txt類沒有固定的寬度，這個解決方案可以工作嗎？ – Zac

是的，你可以在小提琴中看到它。 '.txt'的寬度是其中文本的寬度。它顯示爲嵌入塊，並在父級＃modulewrapper中的中心對齊。 – xxxmatko

我也不太清楚，我理解它是什麼你問。如果我沒有弄錯你想要的是讓文字置於圖像上方。這是可以做到看到https://jsfiddle.net/6c9gmvom/9/

#wrapper {width:100%;position:relative} 
.txt { 
    position:absolute; 
    text-align:center; 
    margin:0 auto; 
    width:40px; 
    background-color:#ffffff; 
    z-index: 100; 
    width:100%; 
} 
img { 
height:30px;width:100%; 
} 

.imageClass{ 
    position:absolute; 
    left: 0; 
    top: 0; 
}

來源

2016-08-24 19:55:43 Juan

.txt { 
    text-align:center; 
    margin:0 auto; 
    width:100%; 
    background-color:#ffffff; 
    position: fixed; 
    left: 0; 
    top: 15px; 
} 
img { 
    height:30px; 
    width:100%; 
    position: relatable; 
}

來源

2016-08-24 19:56:43

CSS在圖像上水平排列文字

回答

相關問題