在一个半圆的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属性。不过也有一些类似的技巧: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金丝雀中可用，但我想今天对你来说没什么用。

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;
}