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

Posted 2023-03-29

【中文标题】中心 WordPress 元数据类别和时间元素 (Divs)

【英文标题】：Center WordPress Meta Data Category & Time Element (Divs)

【发布时间】：2019-01-02 18:03:55

【问题描述】：

我无法确定如何将类别（每周）和时间（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"  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;"   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（桌面）

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


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

图片（桌面）

CSS - 新 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;

图片（移动 767 像素）

任何帮助将不胜感激！

【参考方案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%);

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

【讨论】：

我会看看flex，HTML 是从可视化作曲家生成的。所以改变 HTML 不是一种选择，@tom-savage

【参考方案2】：

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

CSS

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

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