css - 在一个半圆的 div 内对齐文本

Question

我有我的 div 的代码。我想在里面点燃一些文字。文本必须与 div 的左曲线对齐。这怎么可能？谢谢！

这是div的代码：

#cv {

position: absolute;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;  
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;

padding: 10px;


}

Answer 1

我相信您希望文本遵循半圆，而不仅仅是沿着直边向左对齐。使用简单的 css 属性（还）不可能做到这一点。然而，有一些像这样的 hacky 技术： http ://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes

甚至还有一种工具可以帮助您，例如： http ://www.csstextwrap.com/

Adobe 正在推动一个新的 css 属性来包装文本： http: //www.adobe.com/devnet/html5/articles/css3-regions.html

它应该已经在 Chrome Canary 中可用，但我想这对你今天用处不大。我认为您今天将不得不与黑客有关...

Answer 2

工作示例：http: //jsfiddle.net/mQFK6/4/

你想添加一个<p>来保存文本，然后将它向下移动50%到圆圈的中间，float它left

#cv {

position: relative;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;  
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;


}

p{
    top: 50%;
    position: relative;
    float: left;
    margin-left: 5px;
}