圖像上方的中心文字

Question

我有一個問題：如何將文本居中放在適當圖像的上方？

#container { 
 
    text-align: center; 
 
} 
 

 
.text { 
 
    display: inline-block; 
 
    margin: 0 20px 0 20px; 
 
} 
 

 
.img { 
 
    margin: 0 20px 0 20px; 
 
    width: 50px; 
 
    height: 50px; 
 
}

<div id="container"> 
 
    <div class="text">100</div> 
 
    <div class="text">500</div> 
 
    <div class="text">1000</div> 
 
    <br> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
</div>

我已經嘗試了很多辦法，但我不能獲得良好的效果。

應該怎麼看：

Answer 1

最簡單和可能最安全的方式是打包在一個div的，IMG &文本：

<div id="container"> 
    <div class="txtimg"> 
     100 
     <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif"> 
    </div> 
    <div class="txtimg"> 
     500 
     <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif"> 
    </div> 
    <div class="txtimg"> 
     1000 
     <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif"> 
    </div> 
</div> 

和CSS：

.txtimg{ 
    display: inline-block; 
    text-align: center; 
} 
.txtimg > img{ 
    display: block; 
} 

這樣，您就能夠漂浮在水面或您的IMG定位/ txt組合就像你想要的。

Answer 2

使文字相同的寬度圖像

.text { 
    width: 50px; 
} 

的jsfiddle演示：https://jsfiddle.net/L3gcy3ek/1/

Answer 3

您可以使用<figure>和<figcaption>標籤：

#container { 
 
    text-align: center; 
 
} 
 

 
.text { 
 
    display: inline-block; 
 
    margin: 0 20px 0 20px; 
 
} 
 

 
.img { 
 
    margin: 0 20px 0 20px; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
figure { 
 
    width: 25%; 
 
    float: left; 
 
    margin: 0; 
 
    text-align: center; 
 
    padding: 0; 
 
}

<figure><figcaption>100</figcaption> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    </figure> 
 
    <figure><figcaption>500</figcaption> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    </figure> 
 
    <figure><figcaption>1000</figcaption> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    </figure>

這會自動居中文本。您必須使用figure{} CSS才能將圖片正確對齊到您希望在頁面上顯示的位置。

希望它有幫助！

Answer 4

一個現代瀏覽器的方法是使用CSS Flexbox的佈局：

#container { 
 
    /* displays the element, and its contents, according 
 
    to the flexbox layout: */ 
 
    display: flex; 
 

 
    /* allows content to wrap to a new line: */ 
 
    flex-wrap: wrap; 
 

 
    /* aligns the first and last elements of each 'row' 
 
    to the left and right sides of the element 
 
    and allows space between the elements that fall 
 
    between the first and last: */ 
 
    justify-content: space-between; 
 
} 
 

 
#container div.text, 
 
#container img.img { 
 

 
    /* setting the elements to align themselves 
 
    to the center of their available 'box': */ 
 
    align-self: center; 
 
    text-align: center; 
 
    width: 30%; 
 
}

<div id="container"> 
 
    <div class="text">100 adding some extraneous and irrelevant text to try and ensure that the text exceeds the width of the &lt;img&gt; below...</div> 
 
    <div class="text">500</div> 
 
    <div class="text">1000</div> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
</div>

，或者還要在現代瀏覽器，使用CSS網格佈局：

#container { 
 

 
    /* displays the element and its contents using 
 
    the CSS grid layout: */ 
 
    display: grid; 
 

 
    /* defines three columns each of which takes 
 
    one fractional unit of the available space: */ 
 
    grid-template-columns: repeat(1fr, 3); 
 

 
    /* defines two rows each of which is set to 
 
    'min-content', which allow the contained 
 
    elements to take the vertical space they 
 
    require: */ 
 
    grid-template-rows: repeat(min-content, 2); 
 
    margin: 0 auto; 
 
} 
 

 
div.text, 
 
img.img { 
 

 
    /* to allow for a small 'gutter' between 
 
    columns: */ 
 
    max-width: 90%; 
 
    text-align: center; 
 
} 
 

 
div.text { 
 

 
    /* assigning the matched elements to 
 
    the first row, allowing the brwoser 
 
    to place the elements in the correct 
 
    grid box according to the order in 
 
    the DOM: */ 
 
    grid-row: 1; 
 
} 
 

 
img.img { 
 
    grid-row: 2; 
 
}

<div id="container"> 
 
    <div class="text">100</div> 
 
    <div class="text">500</div> 
 
    <div class="text">1000</div> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
    <img src="http://img.loveit.pl/obrazki/20120312/fotobig/89f1dfc750ee6522d6769aa.gif" class="img"> 
 
</div>

個

參考文獻：

• CSS flexbox compatibility。
• CSS grid compatibility。

Answer 5

這是我會做什麼：

.image { 
    position:relative; 
} 

.text { 
    position:absolute; 
    text-align:center; 
}