html - 仅在响应模式下使 DIV 标签居中对齐

Question

我有一个包含三列的标题。

<div class="thirds">
    <a href="http://www.honey-do-list-services.net"><img src="http://www.honey-do-list-services.net/wp-content/uploads/2013/08/honeydolistlogweb-handyman.png" align="left"></a>
</div>
<div class="thirds">
    <a href="http://www.honey-do-list-services.net/wp-content/uploads/2014/05/CheckAPro-1-Ramsey-4-30-14.mp3" target="_blank"><img src="http://www.honey-do-list-services.net/wp-content/uploads/2014/05/dave-ramsey-endorsement-button-small.png"></a>
</div>
<div class="thirds">
   <a href="http://www.honey-do-list-services.net/contact-us/"><img src ="http://www.honey-do-list-services.net/wp-content/uploads/2015/09/contact_iconsmhandyman.png"; align="right"></a>
</div>

列分别对齐(左、中、右)。我需要让所有这些都居中，但只能在一个小的媒体屏幕上。我怎样才能做到这一点？

Answer 1

纵向和横向模式

   @media screen 
      and (device-width: 320px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 2) {

     .thirds{
        width:100%;
        display:block;
        text-align:center;
        vertical-align: center;
      }    
    }

这可能有效:)