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

Posted 2023-03-06

【中文标题】使用媒体查询使 WP 短代码元素居中

【英文标题】：Keeping a WP shortcode element centered using media query

【发布时间】：2017-01-09 22:42:21

【问题描述】：

我正在使用 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"    />

       <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"    />

      <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"    />

      <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"    />

    <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 查看问题。

【问题讨论】：

此问题需要将呈现的 HTML 复制到其中，而不是指向您网站的链接。

我不知道该怎么做。

就像@cale_b 说的，你需要指定渲染的HTML，否则很难识别你的问题。以下是创建 Minimal, Complete, and Verifiable example 的方法。

@thisFunkinGuy 在浏览器中打开您的网站，然后单击CTRL + U 以查看页面源代码。确定您遇到问题的部分并在此处添加相关代码。

使用呈现的 HTML 更新。

【参考方案1】：

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

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

条目的“容器”：

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

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

【讨论】：

谢谢@cale_b。我熟悉开发者控制台，并且实际上尝试使用它来解决这个问题，但我显然没有检查正确的元素。感谢您的帮助！