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;
      }    
    }

这可能有效：）

Answer 2

媒体查询是您最好的选择。将其添加到样式表中，min和max属性可以包含任何值，这只是一个示例：

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) 
  {
    div.thirds 
    {
      text-align: center;/* or whatever property you want*/
    }
  }

这里的文章非常好： https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

仅在响应模式下使DIV标记对齐中心

2 个答案: