javascript - CSS、JavaScript、HTML，如何将 div 内的文本与图像旁边的中间对齐？并为文字添加动画

Question

我是 html 的新手，我正在尝试制作一个简单的网页。

我在将文本与图像旁边的中间对齐时遇到问题。

我怎样才能制作动画，当我单击图像时，它旁边的文本会在图像下方向左滑动。这意味着文本将隐藏在图像下方。 (一个动画，其中文本按字母顺序向左滑动。第一个字母然后是下一个字母等等......具有快速动画。)

当我再次点击图片时。它将以相同的方式显示文本。

HTML:

    <div class="containerout">  
    <div class="containerin">

    <div class="containerinner">
         <img id="sprite" src="http://www.coderworkshop.com/wp-content/uploads/2013/04/CompletedBlueGuy.png" width="35px" height="auto" alt="sprite pic" /><span>LONGER LONGER TEXT</span>
    </div>

    <div class="containerinner">
         <img id="sprite" src="http://www.coderworkshop.com/wp-content/uploads/2013/04/CompletedBlueGuy.png" width="35px" height="auto" alt="sprite pic" /><span>LONGGERR TEXT</span>
    </div>

    <div class="containerinner">
         <img id="sprite" src="http://www.coderworkshop.com/wp-content/uploads/2013/04/CompletedBlueGuy.png" width="35px" height="auto" alt="sprite pic" /><span>SHORTER TEXT</span>
    </div>

    </div>  
    </div>

CSS:

.containerinner {
    height: 35px ;
    border: 2px solid black ;
    padding: 4.5px ;
    margin: 5% auto ;
    width: auto ;
}

http://jsfiddle.net/backspaced/LfhLovd7/

Answer 1

要回答您的第一个问题，即关于将文本与图像中间对齐，请将其添加到您的 CSS 中:

.containerinner img {
    vertical-align: middle;
}

就动画而言，也许像下面这样？

$("img").click(function () {
   $("span").animate({
       width: 'toggle'
   }, 500);
});

使用一些额外的 CSS 将文本保持在一行中:

span {
    height: 18px;
}

https://jsfiddle.net/lemoncurry/wj2nrwo8/