shape-outside和垂直对齐文本

Question

如何在一个块中垂直对齐文本？我不能这样做而不破坏左侧具有shape-outside属性的元素。

.a {
  width: 150px;
  height: 300px;
  background-color: yellow;
}

.b {
  float: left;
  -webkit-shape-outside: polygon(0% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%);
  -webkit-clip-path: polygon(0% 50%, 100% 0%, 0% 0%, 0% 100%, 100% 100%);
  width: 100%;
  height: 100%;
  background-color: black;
}

.c {
  font-family: Arial;
  font-size: 16px;
  text-align: right;
}

<div class="a">
  <div class="b"></div>
  <div class="c">text text text text text text text text text text text text text text text text text text</div>
</div>

这张图片展示了我的现状和目标。

父元素的高度和文本长度都不确定。

- SeregPie

---

Shape-outside是一种相对较新的属性，浏览器支持较少/较弱。因此，实际上有很多东西会破坏它。 - jbutler483

如果支持shape-inside，这将不成问题。 - SeregPie

我几乎可以说，现实情况下并不支持shape-outside属性。 (http://caniuse.com/#feat=css-shapes) - jbutler483

Answer 1

你可以使用calc(50% + 30px);来设置padding-top

这里支持calc函数

http://jsfiddle.net/yt4py6oa/5/

.c {
    position:relative;
    font-family:"Arial";
    font-size:16px;
    text-align:right;
    padding-top: calc(50% + 30px);
}

- GibboK

Answer 2

看起来需要垂直居中对齐。在这种情况下，您需要为“c”容器指定一个高度，例如父容器的1/3。

然后应用：（a的高度-c的高度）/ 2

并将其设置为“c”的上边距。

- CY_Techie

Answer 3

just put **padding-top:100px;** to "c" class,

.c {
    font-family:"Arial";
    font-size:16px;
    text-align:right;
    padding-top:100px;
}

http://jsfiddle.net/slokuliyana/yt4py6oa/1/

- slokuliyana

---

文本内容和框高度会有所不同。 - SeregPie