css - 编辑 : How would I go about inlining these span and imgs in CSS?

Question

这是我的 HTML 代码:

        <div id="page" class="cf">
            <a href="#" id="latest">
                <img src="images/fzero.png"/>
                <span> VGC - F-ZERO (SNES) game review</span>
            </a>
        <div class="feature-bar cf">
                <ul>
                    <li>
                        <a class="videos" href="">
                            <img src="images/mario.png" />
                            <span>VGC - Super Mario 64 game review</span>
                        </a>
                    </li>
                    <li>
                        <a class="videos" href="">
                            <img src="images/sf2t.png" />
                            <span>VGC - Street Fighter 2 Turbo (SNES) game review</span>
                        </a>
                    </li>
                    <li>
                        <a class="videos" href="">
                            <img src="images/tekken2.png"/>
                            <span>VGC - TEKKEN 2 (PlayStation) game review</span>
                        </a>
                    </li>
                    <li>
                        <a class="videos" href="">
                            <img src="images/Nintendo64.png"/>
                            <span>VGC - Nintendo 64 console review</span>
                        </a>
                    </li>
                    <li>
                        <a class="videos" href="">
                            <img src="images/Nintendo64.png"/>
                            <span>VGC - Nintendo 64 console review</span>
                        </a>
                    </li>
        </div>

对不起，我没有解释好。但是随着跨度的增加，我希望它们位于 img 之下，但居中于中间。我已将 div 制作成无序列表，还是应该将它们保留为 div？

这是我的 CSS(我是初学者，开始了一个新元素。)

/* F-ZERO */
a#latest img, a#latest span {margin: 30px 0 0 50px;}
a#latest img {
 border: 1px solid #000000;
 display:block;
 max-width: 400px;
 max-height: 100%;
}
/* FEATURE BAR*/
a#latest span {text-align: center;}

a.videos img {
 max-width: 150px;
}
a.videos span {text-align:center;}

Answer 1

img和span已经是内联元素，需要将div的显示改为内联

.feature-bar div {
  display: inline;
  text-align: center;
}