Question

尝试将兄弟姐妹div置于另一个兄弟姐妹的中间。

<div class="views-row views-row-1 views-row-first">        
  <div class="views-field views-field-title">
    <span class="field-content"><a href="https://example.com/"target="_blank">Example Name</a></span>
  </div>
  <div class="views-field views-field-field-project-image">
    <div class="field-content"><a href="https://example.com/" target="_blank">
      <img typeof="foaf:Image" src="http://example.com/img.png"></a>
    </div>
  </div> 
</div>

因此，示例名称将出现在图像的非常死的中心。

它应该是这样的：

------------------------
|                      |
|                      |
|                      |
|                      |
|                      |
|     Example Name     |
|                      |
|                      |
|                      |
|                      |
|                      |
------------------------

编辑：我试过的东西，对于回答这个问题的人来说绝对没有价值，但显然需要它：

我试过这个：

.views-field-title {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

我试过这个：

.views-field-title {
text-align: center;
margin-top: 50em;
position: absolute;

}

而且：

.views-field-title {
    text-align: center;
    top: 25em;
    width: 100%;
}

.views-field-title a {
position: absolute;
}

Answer 1

我不确定你的页面中的CSS，但是你可以尝试使用一些位置来使文本在图像上方并弯曲以使文本居中：

＆＃13;

img {
  max-width: 100%;
}

.views-row {
  position: relative;
  display:inline-block;
}

.views-field-title {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
  display:flex;
  flex-direction:column;
}
.views-field-title:after,.views-field-title:before {
 content:"";
 flex:1;
}

＆＃13;

<div class="views-row views-row-1 views-row-first">
  <div class="views-field views-field-title">
    <span class="field-content"><a href="https://example.com/"target="_blank">Example Name</a></span>
  </div>
  <div class="views-field views-field-field-project-image">
    <div class="field-content">
      <a href="https://example.com/" target="_blank">
        <img typeof="foaf:Image" src="https://lorempixel.com/400/400/"></a>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您需要将标题绝对置于主容器内。

水平居中很容易。

垂直居中有点棘手。你能改变HTML吗？如果是这样，您可以添加span标记并将其用作“垂直助手”以强制垂直居中。

这是CSS：

.views-row-first {
  position: relative;
  text-align: center;
}
.views-field-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.views-field-title .field-content {
  display: inline-block;
  vertical-align: middle;
}
.views-field-title .vertical-helper {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

这是HTML：

<div class="views-row views-row-1 views-row-first">        
  <div class="views-field views-field-title">
    <span class="field-content">
      <a href="https://example.com/"target="_blank">Example Name</a>
    </span>
    <span class="vertical-helper"></span>
  </div>
  <div class="views-field views-field-field-project-image">
    <div class="field-content"><a href="https://example.com/" target="_blank">
      <img typeof="foaf:Image" src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Natural-Dog-Law-2-To-dogs%2C-energy-is-everything.jpg?itok=Z-ujUOUr"></a>
    </div>
  </div> 
</div>

这是一个关于JSFiddle的工作演示：https://jsfiddle.net/979dnd36/

将文本居中放在兄弟图像中

2 个答案: