使用媒体查询使 WP 简码元素居中
Keeping a WP shortcode element centered using media query
我正在使用 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 在足够宽的屏幕上查看问题。
有趣的是，您的自定义样式似乎没有覆盖您所询问的任何相关样式。
因此，作为参考，这里有两种不同的样式（以它们的当前形式）：
条目的"container"：
.posts-grid {
list-style: none;
margin-left: -20px;
width: 110%;
}
以及列表项本身：
.posts-grid .item {
float: left;
width: 255px;
margin: 0 20px;
}
请注意，如果您使用浏览器的开发人员控制台，这些内容很容易看到 - 甚至可以调整/玩转。我强烈建议使用 Chrome 并了解 Developer's Console。这是一个超级强大的工具 - 老实说，我不知道在拥有它们之前我们是如何高效地进行开发的！
因此，如果您注意到这些样式中有一些缺失/"wrong"，则需要对其进行调整，以实现您想要的效果：
- 容器 (
.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;
}
在样式中添加这些样式的位置由您决定，但我认为这些样式适用于所有非 "mobile" 版本（其中所有元素当前在您的站点中垂直堆叠）的所有内容。
我正在使用 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 在足够宽的屏幕上查看问题。
有趣的是，您的自定义样式似乎没有覆盖您所询问的任何相关样式。
因此，作为参考，这里有两种不同的样式（以它们的当前形式）：
条目的"container"：
.posts-grid {
list-style: none;
margin-left: -20px;
width: 110%;
}
以及列表项本身：
.posts-grid .item {
float: left;
width: 255px;
margin: 0 20px;
}
请注意，如果您使用浏览器的开发人员控制台，这些内容很容易看到 - 甚至可以调整/玩转。我强烈建议使用 Chrome 并了解 Developer's Console。这是一个超级强大的工具 - 老实说，我不知道在拥有它们之前我们是如何高效地进行开发的！
因此，如果您注意到这些样式中有一些缺失/"wrong"，则需要对其进行调整，以实现您想要的效果：
- 容器 (
.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;
}
在样式中添加这些样式的位置由您决定，但我认为这些样式适用于所有非 "mobile" 版本（其中所有元素当前在您的站点中垂直堆叠）的所有内容。