形状外部和垂直对齐的文本

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>

图像显示我拥有的和我想要完成的任务。

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

Answer 1

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/

Answer 2

似乎需要垂直中心对齐。在这种情况下，您需要为'c'容器提供一个高度。说父容器的1/3。

然后应用:(高度为c的高度）/ 2

并将其设置为'c'的填充顶部。

Answer 3

您可以将int gnuplot() { FILE *gnu; gnu = _popen(" gnuplot ", "r"); fprintf(gnu, "plot \'C:/Users/user/Documents/gnuplot/cpp/FFT/file.dat\' with linespoints \n "); fflush(gnu); // I'm not sure how or if this will help, I thought it was related _pclose(gnu); return 0; } 用于calc(50% + 30px);

calc is support here

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

padding-top