对齐图像和文本以居中并折叠

Question

如何将图像和文本这两个项目居中，并在调整大小时让文本折叠到下方？

small 的场景很简单，但我很难将文本垂直居中放置在图像上，同时将文本 + 图像的整个宽度水平居中。

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>

Fiddle 演示： 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;
  }
}

希望对你有用。