Html 可单击Flex容器，图像在左侧，文本在右侧居中

预期结果应为：

我知道CSS，除了flex和grid，它们都让我发疯

我需要一个2列flex容器，整个容器必须是可点击的。容器的左侧有图像，右侧有文本

.myflex容器{
显示器：flex；
弯曲方向：行；
字体大小：20px；
文本对齐：居中；
}
.myflex项目左{
背景色：#fff；
盒影：02px6pxRGBA（0,0,0,15）；
填充：0；
弹性：50%；
保证金权利：4%；
边缘底部：16px；
}
.myflex项目对吗{
背景色：#fff；
盒影：02px6pxRGBA（0,0,0,15）；
填充：0；
弹性：50%；
边缘底部：16px；
}
img.imgoxauto{
宽度：72px；
高度：72px；
}

---

我不理解您的代码，但以下是您可以编写的代码

在HTML中：

<div class="container">
    <div class="image-box">
        <img src="your image source here" alt="alt text" />
    </div>
    <p class="description">Your text goes here</p>
</div>

---

我发现您的标记在开始和结束括号不匹配方面存在一些问题。除了这些问题之外，您还可以采用如下方式处理样式：

.myflex容器{
显示器：flex；
弯曲方向：行；
字体大小：20px；
文本对齐：居中；
}
.myflex项目左，
.myflex项目对吗{
弹性：50%；
利润率：10px；
}
img.imgoxauto{
身高：100%；
宽度：74px；
}
.myprod图像{
高度：74px；
右边距：10px；
}
.myflex项目左>a，
.myflex项目右侧>a{
显示器：flex；
}
.可点击卡{
背景色：#fff；
盒影：0 2px 6px rgba（0,0,0,0.15）；
边缘底部：10px；
}

---

您希望所有项目都位于网格容器中，然后内部项目位于flex容器中，如下所示

HTML:

---

你的代码在这里工作得很好。但在任何WordPress实例中都不起作用（在3个不同的实例上测试）。1.不要继承myflex容器“text align:center；”，以使文本居中。2.WordPress自动添加“自动段落”，该段落不是空的，它包含（重复）两次链接（“class=”clickable card“>）。我无法禁用“自动段落”“全球。你知道为什么WordPress不起作用吗？：@mariusfv我已经测试了你的链接。我已经更新了我的答案，并解决了卡文本没有在中间对齐的问题。@巴斯范德林登-现在H5文本是正确的中心（）。但是现在主要的问题（我认为是WordPress bug或Divi主题bug）是WordPress“auto p”（自动段落）复制了两倍于类“clickable card”（所以不像通常那样是空的.p）的“a链接”——这在卡片之间造成了巨大的空间。请参阅图片：。如果我禁用WordPress添加“auto p”，一切都会像一个符咒一样工作，但会破坏所有文章（帖子）的设计。你知道如何防止添加自动p吗？我对wordpress没有什么经验，但可能有用。特别是当它引用禁用每个帖子的自动p时。听起来这也适用于你的情况，你是对的！新问题发布在这里：

.container {
    width: *any width you want;
    height: *any height you want;
    display: flex;
    align-items: center;
}

.container .image-box {
    width: *any width you want;
    height: 100%;
    margin-right: 10px;
    overflow: hidden;
}

.container .image-box img {
    height: 100%;
}

.container .description {
    *Apply any font styling here
}

<div class="grid-container">
    <div class="flex-container">
        <div class="image-box">
            <img src="image" alt="image" />
        </div>
        <h5 class="description">Text</h5>
    </div>

    <div class="flex-container">
        <div class="image-box">
            <img src="image" alt="image" />
        </div>
        <h5 class="description">Text</h5>
    </div>
</div>

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.flex-container {
    display: flex;
    align-items: center;
}

.image-box {
    flex-basis: 20%;
    height: 100%;
    margin-right: 10px;
    overflow: hidden;
}

.image-box img {
    height: 100%;
}

h5.description {
    flex: 1;
}