html div не отображает текст его содержания

Question

У меня есть карусельный слайдер, где я хочу дать название модели каждому изображению. Поэтому я использую <div> и помещаю текст в div. Но текст не отображается, хотя цвет фона этого div виден. Нужна помощь .please.Как отобразить текст? мой образец кода здесь идет

HTML

<link href="bootstrap.min.css" rel="stylesheet"> 
<div id="body-content"> 
    <div class="carousel-nano" > 
      <div id="demo5" class="scroll-img"> 
       <ul> 
       <li> 
        <a href="" target="_blank"> 
         <img src="jsfiddle.net/img/logo.png"/> 
         <div style="color:red;background-color:#000;">Text goes here</div> 
        </a> 
       </li> 
       </ul> 
      </div> 
    </div> 
</div> 

CSS

#body-content .scroll-img { 
    border: 2px solid #CCC; 
width: 890px; 
height: 155px; 
overflow: hidden; 
font-size: 0; 
margin-top: 2px; 
} 
#body-content .scroll-img ul { 
    margin: 0; 
    height: 58px !important; 
    background:#123456; 
} 
#body-content .scroll-img ul li a img{ 
    width: 140px; 
    height: 100px; 
    margin: 0; 
} 
#body-content .scroll-img ul li { 
    display: inline-block; 
    margin: 0px 0 0px 0px; 
    border-right: 10px solid #EEE; 
} 

#body-content #demo5.scroll-img ul { 
    width: 1500px; 
} 
#body-content #demo5-btn { 
    width: 680px; 
    padding-top: 10px; 
} 
#body-content .carousel-nano{ 
margin:0 auto; 
padding:0px; 
text-align:center; 
width:960px; 
} 
#search-image{ 
margin: 0px auto; 
padding: 0px; 
float: left; 
width: 66px; 
height: 103px; 
} 

jsfiddle

Answer 1

Попробуйте увеличить размер шрифта здесь

#body-content .scroll-img { 
    font-size : 12px; 
} 

У вас есть font-size нуль в вашей скрипке. См. Обновленный FIDDLE.

Answer 2

Изменить

#body-content .scroll-img { 
    border: 2px solid #CCC; 
    width: 890px; 
    height: 155px; 
    overflow: hidden; 
    font-size: 0; 
    margin-top: 2px; 
} 

в

#body-content .scroll-img { 
    border: 2px solid #CCC; 
    width: 890px; 
    height: 155px; 
    overflow: hidden; 
    font-size: 14px; 
    margin-top: 2px; 
} 

Answer 3

вещь, которую я заметил, что вы упомянули размера шрифта = 0;, который вызывает у вас проблемы.

размер шрифта является атрибутом, чтобы установить размер текста, который вы хотите напечатать на экране в результате. поэтому увеличить font-size = 5px; atleast посмотреть результат.

Отдых в порядке. Thanks & Продолжайте кодирование. :)