中心 WordPress 元数据类别和时间元素 (Divs)

Question

我无法弄清楚如何将类别（每周）和时间（2018 年 7 月 18 日）居中以进行响应。在桌面上，category 和 time 元素从 position: absolute;

完美居中

但是在响应式模式下，position: absolute;不起作用。

我目前尝试调整 position: relative; 以及 top、right、bottom 和 left。除了在 Stack Overflow 上进行其他搜索，我还没有成功解决这个问题。

HTML

<article id="351" class="mk-blog-thumbnail-item 
image-post-type mk-isotop-item image-post-type content-align-right  clearfix">
    <div class="featured-image"><a href="https://website.com/2018/07/17/this-is-the-event-title-5/" title="This is the Event Title 5"><img class="blog-image" alt="This is the Event Title 5" title="This is the Event Title 5" src="https://website.com/wp-content/uploads/bfi_thumb/edgar-castrejon-459824-unsplash-nt11cbyyqfywge08vr8h2upg76d0miraa45r4lcg4s.jpg" data-mk-image-src-set="{&quot;default&quot;:&quot;https://website.com/wp-content/uploads/bfi_thumb/edgar-castrejon-459824-unsplash-nt11cbyyqfywge08vr8h2upg76d0miraa45r4lcg4s.jpg&quot;,&quot;2x&quot;:&quot;https://website.com/wp-content/uploads/bfi_thumb/edgar-castrejon-459824-unsplash-nt11cbz3lv4co3z1ddcx9m5w5lzfmlmkijrippzuqg.jpg&quot;,&quot;mobile&quot;:&quot;&quot;,&quot;responsive&quot;:&quot;true&quot;}" width="400" height="350" itemprop="image" mk-img-src-setted=""><div class="image-hover-overlay"></div><div class="post-type-badge" href="https://website.com/2018/07/17/this-is-the-event-title-5/"><svg class="mk-svg-icon" data-name="mk-li-image" data-cacheid="icon-5b58c8428bd16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M460.038 4.877h-408.076c-25.995 0-47.086 21.083-47.086 47.086v408.075c0 26.002 21.09 47.086 47.086 47.086h408.075c26.01 0 47.086-21.083 47.086-47.086v-408.076c0-26.003-21.075-47.085-47.085-47.085zm-408.076 31.39h408.075c8.66 0 15.695 7.042 15.695 15.695v321.744h-52.696l-55.606-116.112c-2.33-4.874-7.005-8.208-12.385-8.821-5.318-.583-10.667 1.594-14.039 5.817l-35.866 44.993-84.883-138.192c-2.989-4.858-8.476-7.664-14.117-7.457-5.717.268-10.836 3.633-13.35 8.775l-103.384 210.997h-53.139v-321.744c0-8.652 7.05-15.695 15.695-15.695zm72.437 337.378l84.04-171.528 81.665 132.956c2.667 4.361 7.311 7.135 12.415 7.45 5.196.314 10.039-1.894 13.227-5.879l34.196-42.901 38.272 79.902h-263.815zm335.639 102.088h-408.076c-8.645 0-15.695-7.043-15.695-15.695v-54.941h439.466v54.941c0 8.652-7.036 15.695-15.695 15.695zm-94.141-266.819c34.67 0 62.781-28.111 62.781-62.781 0-34.671-28.111-62.781-62.781-62.781-34.671 0-62.781 28.11-62.781 62.781s28.11 62.781 62.781 62.781zm0-94.171c17.304 0 31.39 14.078 31.39 31.39s-14.086 31.39-31.39 31.39c-17.32 0-31.39-14.079-31.39-31.39 0-17.312 14.07-31.39 31.39-31.39z"></path></svg></div></a></div>
<div
    class="item-wrapper">
    <div class="mk-blog-meta">
        <div class="mk-blog-meta-wrapper">
            <div class="mk-categories blog-meta-item"> <a href="https://website.com/category/weekly/" rel="category tag">Weekly</a></div> <time datetime="2018-07-17"><a href="https://website.com/2018/07/">17 July, 2018</a></time></div>
        <h3 class="the-title"><a href="https://website.com/2018/07/17/this-is-the-event-title-5/">This is the Event Title 5</a></h3>
        <div class="the-excerpt">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ultrices odio. Etiam eu [...]</p>
        </div>
    </div>
    </div>
    <div class="clearboth"></div>
</article>

CSS (Desktop)

.mk-categories {
    top: -25px;
    left: 140px;
    text-transform: capitalize;
    position: absolute;
}

time {
    position: absolute;
    top: 37px;
    width: 100px;
    left: 120px;
    font-size: 12px;
}

Image (Desktop)

CSS - NEW position: relative;

.mk-categories {
    top: -25px;
    left: 140px;
    text-transform: capitalize;
    position: relative;
}

time {
    position: relative;
    top: 37px;
    width: 100px;
    left: 120px;
    font-size: 12px;
}

Image (Mobile 767px)

如有任何帮助，我们将不胜感激！

Answer 1

我很好奇您为什么在桌面或移动设备中对这些元素使用绝对定位。是否有特定原因需要将它们绝对放置在桌面上？

在我看来，最简单的解决方案是使用 flexbox 重做该部分。它在这一点上得到了广泛的支持，并且相当容易实现。

这里 link 详细介绍了 flexbox 及其使用方法。

在这种情况下，我没有所有的 CSS 可以继续，但这里可能有一个例子：

.mk-blog-meta-wrapper {
    display:flex;
    flex-direction:column;
    align-items:center;
}

.mk-categories {
    text-transform: capitalize;
}

time {
    font-size: 12px;
}

您的 HTML 也造成了问题，因为它迫使您尝试将项目移到标题之前。再一次，我不确定所有的含义，但是有什么理由你不能改变你的 html 以适应其他部分之间的标题？

<div class="mk-blog-meta-wrapper">
  <div class="mk-categories blog-meta-item"> <a href="https://website.com/category/weekly/" rel="category tag">Weekly</a></div> 
  <h3 class="the-title"><a href="https://website.com/2018/07/17/this-is-the-event-title-5/">This is the Event Title 5</a></h3>
  <time datetime="2018-07-17"><a href="https://website.com/2018/07/">17 July, 2018</a></time>
</div>

希望这对您有所帮助。看看 flexbox，它会改变你的生活。编码愉快。

编辑：由于您无法移动 HTML，这个绝对定位技巧应该有所帮助。

.mk-categories, time {
  position:absolute;
  left:50%;
  transform:translatex(-50%);
}

这会将两个元素的左边界移动到 parent 元素的 50% 标记处。然后将元素本身向左移动元素宽度的 50%，有效地将其居中。从 .mk-categories 和 time 中删除你的 position 和 left 声明，你应该是金色的。

Answer 2

原来问题的解决方案只是添加这个：

CSS

.mk-categories a, time a { display:block; }

然后根据需要用margin定位类别和时间。

中心 WordPress 元数据类别和时间元素 (Divs)

Center WordPress Meta Data Category & Time Element (Divs)

css

wordpress

center

responsive-design

responsive