将图像和文本对齐到中心并折叠

Question

如何将两个项目（图像和文字）放在一起，并在重新调整尺寸时将文字折叠在下方？

小的场景很容易，但我很难将文本垂直居中在图像内联，同时水平地居中文本+图像的整个宽度。

Answer 1

这对你有用吗？想法是使用内联块，请参阅以下内容。

p {
    text-align: center;
}

p * {
    display: inline-block;
    vertical-align: middle;
}

<p>
    <img src="http://placehold.it/200x200"/>
    <span>text text text</span>
</p>

小提琴演示： http://jsfiddle.net/4e9kro2p/

Answer 2

试试这个..

<div class="col-md-6">
  <img src="http://placehold.it/200x200" class="cover">
  <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing</span>
</div>

在CSS中，

.cover{
    vertical-align:middle;
  }
 @media (max-width:1200px) {
  .cover{
    display: block;
    margin: 0px auto;
  }
  .caption {
    text-align: center;
    display: block;
  }
}

希望它对你有用。