Question

在响应时，在图像上垂直和水平对齐内容DIV的最佳方法是什么？我可以给位置绝对并对齐top:some%和left:some%但是它不会对齐某些图像容器的中间位置屏幕，我可以给margin-top:-%，margin-left:some%这个也不会正确地对齐一段时间意味着在不同的屏幕上。还有其他方法可以做到。内容div应该是准确的在图像上放置中间（水平和垂直在所有屏幕中）。最好的方法是什么？

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
   <img src="img/someimage.png" class="img-responsive">
   <div class="content_div">
       image content paragraph 1
       image content paragraph 1
       image content paragraph 1
   </div>
</div>

Answer 1

内容div必须放在图像的中间。

  <div class="container">
    <img goes here>
    <div text goes here>
  </div>

CSS

 .contianer
 {
   position: relative;
 }

 .container img, .container .txt
 {
    position: absolute;
 }

 .container img
 {
   //Width and height
  }

 .container .txt
 {
    width: 100%;
    margin: auto;
    line-height: height of image div; // It ll pace in the middle of image
 }

Demo它会帮助你。

另一种方式是

  set table layout for div and table-cell for content which will support vertical-align:middle`

修改

Demo2 - 它会帮助你。

感谢SO

在响应时，在图像上垂直和水平对齐内容DIV的最佳方法是什么？

1 个答案: