使用媒体查询使 WP 短代码元素居中

Question

我正在使用 Krown Backer 主题，并且我正在使用 Krown 短代码在主页上显示指定数量的我的最新帖子。但是，一旦我的网站显示在更宽的屏幕上，帖子就会迁移到屏幕左侧。

我想让帖子元素居中，并在屏幕变宽时保持元素居中。

这是呈现的 HTML：

<h3 style="text-align: center;">
 Latest Articles
</h3>

<div class="centered">

 <p style="text-align: center;">

  <div class="krown-column-container clearfix last span12 clearfix">

 </p>

 <p style="text-align: center;">

  <div class="krown-latest-posts classic">

   <ul class="posts-grid clearfix">

    <li class="item">

     <a class="post-img fancybox-thumb" href="http://centerforalternativefuels.org/alternative-fuel-deployment/cultivating-a-supportive-environment-for-alternative-fuel-vehicles/">

      <img src="http://centerforalternativefuels.org/wp-content/uploads/sites/2/2015/05/LinkedIn-Header-255x173.jpg" width="255" height="173" alt="" />

       <span>
       </span>

     </a>

     <a href="http://centerforalternativefuels.org/alternative-fuel-deployment/cultivating-a-supportive-environment-for-alternative-fuel-vehicles/">

      <h3>
       Cultivating a Supportive Environment for Alternative Fuel Vehicles
      </h3> 

     </a>

     <span class="post-cat">
      Alternative Fuels, Technology Innovation
     </span>

     <p class="post-excerpt">
      Because of the multitude of benefits they offer, alternative fuel vehicles (AFVs) provide a tantalizing investment prospect for many organizations However, valuation of these investments can vary significantly within an organization.
     </p>

   </li>

   <li class="item">

    <a class="post-img fancybox-thumb" href="http://centerforalternativefuels.org/advanced-vehicles/heavy-duty-trucks-regulations-technology/">

     <img src="http://centerforalternativefuels.org/wp-content/uploads/sites/2/2014/08/Analyze-your-Fleet-center-for-alternative-fuels-carbonblu-255x173.jpg" width="255" height="173" alt="" />

      <span>
      </span>

    </a>

    <a href="http://centerforalternativefuels.org/advanced-vehicles/heavy-duty-trucks-regulations-technology/">

     <h3>
      How Regulations Advance Technology and Impact The Heavy Duty Truck Market
     </h3>

    </a>

    <span class="post-cat">
     Advanced Vehicles, Technology Innovation
    </span>

    <p class="post-excerpt">
     The newest semi-trucks have a futuristic, streamline appearance more akin to a bullet train than the boxy workhorses that populated our highways over the last several decades. But it is function, not form, driving these changes.
    </p>

   </li>

   <li class="item">

    <a class="post-img fancybox-thumb" href="http://centerforalternativefuels.org/fleet-optimization/nafa-fleet-accreditation/">

     <img src="http://centerforalternativefuels.org/wp-content/uploads/sites/2/2014/08/Get-funded-center-for-alternative-fuels-carbonblu-255x173.jpg" width="255" height="173" alt="" />

      <span>
      </span>

    </a>

    <a href="http://centerforalternativefuels.org/fleet-optimization/nafa-fleet-accreditation/">

     <h3>
      NAFA Fleet Accreditation
     </h3>

    </a>

    <span class="post-cat">
     Fleet Optimization
    </span>

    <p class="post-excerpt">
     It’s no secret, companies and government agencies like to be seen doing the right thing. Cleaning up their fleet operations is one highly-visible way to broadcast their commitment to the environment. Take a short drive and you’re likely to see vehicles with words like “clean energy”, “low emissions”, or “green fleet” in careful juxtaposition with the company logo.
    </p>

   </li>

   <li class="item">

    <a class="post-img fancybox-thumb" href="http://centerforalternativefuels.org/advanced-vehicles/advancing-alternative-fuels/"><img src="http://centerforalternativefuels.org/wp-content/uploads/sites/2/2015/03/center-for-alternative-fuels-news-255x173.jpg" width="255" height="173" alt="" />

    <span>
    </span>

   </a>

   <a href="http://centerforalternativefuels.org/advanced-vehicles/advancing-alternative-fuels/">

    <h3>
     Advancing Alternative Fuels
    </h3>

   </a>

   <span class="post-cat">
    Advanced Vehicles, Alternative Fuels
   </span>

   <p class="post-excerpt">
     Organizational fleets have long been targeted as an ideal market for alternative fuels beginning with passage of the Alternative Motor Fuels Act in 1988. Although fleets are widely considered good candidates for alternative fuel vehicles (AFVs), advancing these new technologies through the fleet sector has proven difficult. <!--more--> 
   </p>

   </li>

  </ul>

 </div>

</p>

<p style="text-align: center;">

</div>

</div>

</p>

</div>

我的网站已使用以下 css 进行了自定义：

@media all and (min-width: 1179px) {
.wrapper {
  width: 1179px;
}
}

@media all and (max-width: 1179px) {
#main-menu .responsive-menu {
display: block !important;
position: absolute;
top: -13px;
right: -13px;
}
}

@media all and (max-width: 1179px) {
#main-menu .top-menu {
display: none !important;
}
}

#main-menu {
margin-top: 14px;
margin-right: -50px;
}

.top-menu > li {
  margin-left: 24px;
}

.top-menu > li > a {
  font-weight: 400;
  font-size: 12px;
}

#custom-body {
  margin-bottom: 1px;
  margin-left: 60px;
  margin-right: 60px;
}

.home .wrapper:nth-child(2) {
    width:100%;
}

.page-id-1067 .wrapper:nth-child(2) {
    width:100%;
}

#custom-header {
  margin-bottom: 0px;
  height: 490px !important;
}


.home .wrapper:nth-child(2) {
    width:100%;
}

.page-id-1067 .wrapper:nth-child(2) {
    width:100%;
}


/* Fix to Events Calendar plugin and Backer CSS issues */
#tribe-events-pg-template dt:after {
  content: none;
}

.single-tribe_events #tribe-events-content .tribe-events-event-meta dt {
  margin-right: 1em;
  text-align:left;
}

/*Make sure there is no underline when hovering over links */
a:focus, a:hover {
  text-decoration: none;
}

/* Removes 404 Not Found from Events page */
.tribe-events-page-template #page-title {
  display: none;
}

/* Community Page edits - not a huge white footer */
.page-id-1134 #content {
 padding: 60px 0 0;   
}
}

您可以在足够宽的屏幕上通过http://centerforalternativefuels.org 查看问题。

Answer 1

有趣的是，您的自定义样式似乎不会覆盖您询问的任何相关样式。

因此，作为参考，这里有两种不同的样式（以其当前形式）：

条目的“容器”：

.posts-grid {
    list-style: none;
    margin-left: -20px;
    width: 110%;
}

还有列表项本身：

.posts-grid .item {
    float: left;
    width: 255px;
    margin: 0 20px;
}

请注意，这些很容易看到 - 如果您使用浏览器的开发者控制台，甚至可以调整/玩游戏。我强烈建议您使用 Chrome 并了解开发者控制台。这是一个超级强大的工具 - 老实说，在我们拥有它们之前，我真的不知道我们是如何高效地进行开发的！

因此，如果您会注意到这些样式中缺少某些内容/“错误”，则需要对其进行调整，以做您想做的事：

1. 容器 (.posts-grid) 上没有 text-align: center。
2. 项目 (.posts-grid .item) 是 float: left。

所以，让我们分配正确的样式：

.posts-grid {
    list-style: none;
    /* these two cause funkiness, so remove them: 
    margin-left: -20px;
    width: 110%; */
    /* we want text-align center to center the items */
    text-align: center;
}

.posts-grid .item {
    /* float jams to the left edge, so remove it:
    float: left; */
    /* now to make them line up in a row, add display inline-block */
    display: inline-block;
    /* and now they have "text-align center" inherited, so fix that */
    text-align: left;
    width: 255px;
    margin: 0 20px;
}

在样式中添加这些样式取决于您，但我认为这些样式适用于所有非“移动”版本（其中所有元素当前在您的网站中垂直堆叠）。