円の半径を段落に合わせてどのように調整できますか

段落に合わせて円の半径を変更しようとしています。円の半径を段落に合わせてどのように調整できますか

#circle{ 
 
background:#aaa; 
 
height:300px; 
 
width:300px; 
 
    border-radius:50%; 
 
text-align:center; 
 
    /*line-height:300px;*/ 
 

 
}

<body> 
 
    <div class="container"> 
 
     <div id="circle"> 
 
    <span class="text-center"><p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet </p></span></div> 
 
    </div> 
 
</body>

出典

2016-03-18 Irfan Syed

'ポジション：あなたは（http://caniuse.com/#feat=flexbox詳細情報を）：サポートする必要があるブラウザ内容に応じて、フレキシボックス用ブラウザの接頭辞を使用する必要がありますので、予めご了承くださいセンター;' ?? – Scott

であり、 '/'はCSSでのコメントの仕方ではありません。CSSでコメントを追加するには、 '/ *'と '* /'を使う必要があります。 – Scott

はいposiitonプロパティは値= "center"を取らず、このコードを作成したcodepen.ioでこのコメントを受け入れる方法を受け入れるが、 '/ *'と '* /'を使用して開始する –

UPDATED：CSSはtransformプロパティを使用すると、あなたは相対的なサイズのオブジェクトを使用して、中心の位置をより正確にすることができます。

もちろん、段落の高さを取得してコンテンツに関係なく正確に配置するには、いくつかのjavascriptを使用できます。

私はスパンとdivを削除しましたが、それらの必要性は見当たりませんでした。

.container{ 
 
    background:#aaa; 
 
height:300px; 
 
width:300px; 
 
    border-radius:50%; 
 
text-align:center; 
 
vertical-align: middle; 
 
position: relative; 
 
display: block; 
 
} 
 

 
.container p { 
 
position: absolute; 
 
    
 
top: 47%; 
 
    
 
    /* used 47% rather than 50% 
 
    becuase items tend to "sink" visually, 
 
    so placing it slightly higher is a good thing. */ 
 
    
 
transform: translateY(-50%); 
 

 
}

<body> 
 
    <div class="container"> 
 
    <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet </p>  </div> 
 
</body>

出典

2016-03-18 22:00:24 Scott

私はあなたがソースコードからのみ、CSSによって、Pまたはスパンに

チェックをdiv要素の幅と高さに依存することができないと思うと、あなたのdiv要素があるでしょうそれは、それが唯一の半径の円の原因として

HTML

<div class="container"> 
     <div id="circle"> 
    <span class="text-center"><p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet </p></span></div> 
    </div>

01を示している円になることはありません、正方形や長方形

CSS

 #circle{ 
background:#aaa; 
height:auto; 
width:30vw; 
    border-radius:100%; 
text-align:center; 
} 
p{ 
    height:auto; 
width:30vw; 
    border-radius:100%; 
text-align:center; 
    background:red; 

}

出典

2016-03-18 21:54:56 Ryuk

はい、私は私の初期形状が正方形/長方形であることに同意します。したがって、純粋なCSSではうまく動作せず、jQueryを試す必要がありますが、まだいくつかの提案を待っています。 –

私はコードを更新するとは思わないpタグのボーダー半径を与えるとbgは赤ですが、テキストには影響しません – Ryuk

あなたのサークルとうまくいけば、それを格納するためのいくつかのパディング内のコピーを中央にフレキシボックスを使用することができます。

*, *:before, *:after { 
 
    box-sizing:border-box; 
 
} 
 
#circle { 
 
\t background: #aaa; 
 
\t border-radius: 50%; 
 
\t text-align:center; 
 
\t height:300px; 
 
\t width:300px; 
 
\t display:flex; 
 
\t justify-content:center; 
 
\t align-items:center; 
 
\t padding:20px; 
 
}

<div class="container"> 
 
    <div id="circle"> 
 
     <p>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit amet lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</p> 
 
    </div> 
 
</div>

出典

2016-03-18 22:14:31 Angelique

円の半径を段落に合わせてどのように調整できますか

答えて

関連する問題