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

Css 外部形状和垂直对齐的文本,css,webkit,vertical-alignment,polygon,css-shapes,Css,Webkit,Vertical Alignment,Polygon,Css Shapes,如何垂直对齐块内的文本?我无法在不制动左侧元素的情况下执行此操作,该元素在属性外部有一个形状 .a{ 宽度:150px; 高度:300px; 背景颜色:黄色; } .b{ 浮动:左; -webkit外部形状:多边形(0%50%、100%0%、0%0%、0%100%、100%100%); -webkit剪辑路径:多边形(0%50%、100%0%、0%0%、0%100%、100%100%); 宽度:100%; 身高:100%; 背景色:黑色; } c{ 字体系列:Arial; 字体大小:16px;

如何垂直对齐块内的文本?我无法在不制动左侧元素的情况下执行此操作,该元素在属性外部有一个
形状

.a{
宽度:150px;
高度:300px;
背景颜色:黄色;
}
.b{
浮动:左;
-webkit外部形状:多边形(0%50%、100%0%、0%0%、0%100%、100%100%);
-webkit剪辑路径:多边形(0%50%、100%0%、0%0%、0%100%、100%100%);
宽度:100%;
身高:100%;
背景色:黑色;
}
c{
字体系列:Arial;
字体大小:16px;
文本对齐:右对齐;
}

文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本

似乎需要垂直中心对齐。在这种情况下,您需要为“c”容器指定一个高度。比如说父容器的1/3

然后应用:(a的高度-c的高度)/2

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

您可以使用
calc(50%+30px)用于填充顶部


Shape outside是一个相当新的属性,对浏览器的支持很少/很弱。因此,实际上有很多东西会破坏这一点。如果支持内部形状,这不会有问题。文本内容和框高度会有所不同。
just put **padding-top:100px;** to "c" class,

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