Question

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

我希望将posts元素作为中心，并在屏幕变宽时保持元素居中。

以下是呈现的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

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

因此，作为参考，这里有两种不同的风格（以他们的CURRENT形式）：

条目的“容器”：

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

列表项目本身：

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

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

所以，如果你注意到一对情侣在这些款式中缺少/“错误”，那就需要调整，以做你想做的事情：

容器（.posts-grid）上没有text-align: center。
项目（.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;
}

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

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

1 个答案: