テキストの縦方向の配置とそのコンテナの塗りつぶし

Question

私はモバイルレスポンシブルデザインで作業しています。円の真ん中にテキストを表示する必要があるところです。テキストはデータベースから取得されるので、テキストは短くても長くてもかまいません。このテキストは内側の円の中央から始まり、1行以上のテキストがある場合は、テキストを上に移動させる必要があります。私はあなたの便宜のためにJSFilleを作った。 CSSの#childは、適用されているdivには影響していないようです。 Javascriptのソリューションがあれば、それはまた評価されます。ありがとうございました。

JSFiddle

*{ 
 
    box-sizing:border-box; 
 
} 
 
.theCircle{ 
 
    width:84vw; 
 
    height:84vw; 
 
    border:0.5vw solid black; 
 
    margin:auto; 
 
    border-radius:42vw; 
 
    position:relative; 
 
} 
 
.innerCircle{ 
 
    width:62vw; 
 
    height:62vw; 
 
    border:0.5vw solid black; 
 
    margin:auto; 
 
    border-radius:31vw; 
 
    position:absolute; 
 
    top:10.5vw; 
 
    left:10.5vw; 
 
} 
 
.bubble { 
 
position: absolute; 
 
width: 30vw; 
 
height: 10vw; 
 
left: 25vw; 
 

 
border: 1px solid gray; 
 
border-radius: 20vw; 
 
background-color: #e0e0eb; 
 

 

 

 
} 
 
#bName{ 
 

 

 
position: relative; 
 

 
top:2vw ; 
 
left: auto; 
 
font-size: 6vw; 
 
border: 1px solid black; 
 
text-align: center; 
 
word-wrap:break-word 
 
} 
 

 
#child {position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: 50%; 
 
    height: 30%; 
 
    margin: auto;}

<div class="theCircle"> 
 
           
 
           <div class="bubble"> text inside the bubble</div> 
 
    <div class="innerCircle"> 
 
    <div id="bName"><div id="child">I need this to start in the middle of the circle, and to go upwards when there is a lot of text like this </div></div>

Answer 1

を助け、フレックスボックスに関するドキュメントの多くは、オンラインであります、それは非常に素晴らしいです！

チェックこの編集したJSFiddle https://jsfiddle.net/2orwnfxv/3/

あなただけのディスプレイを追加することによって、あなたの内側の円フレキシボックスコンテナを作成する必要があります：フレックス;

.innerCircle{ 
display: flex; 
align-items: center; 
justify-content: center; 
width:62vw; 
height:62vw; 
border:0.5vw solid black; 
margin:auto; 
border-radius:31vw; 
position:absolute; 
top:10.5vw; 
left:10.5vw; 
} 

これは簡単です。希望が助けてくれる！

Answer 2

代わりpositions.Iと周りいじるの表示推測：ここFlexはここ

チェックこのスニペット

* { 
 
    box-sizing: border-box; 
 
} 
 
.theCircle { 
 
    width: 84vw; 
 
    height: 84vw; 
 
    border: 0.5vw solid black; 
 
    border-radius: 42vw; 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.innerCircle { 
 
    width: 62vw; 
 
    height: 62vw; 
 
    border: 0.5vw solid black; 
 
    display: flex; 
 
    margin: auto; 
 
    justify-content: center; 
 
    align-items: center; 
 
    border-radius: 31vw; 
 
} 
 
.bubble { 
 
    position: absolute; 
 
    width: 30vw; 
 
    height: 10vw; 
 
    left: 25vw; 
 
    border: 1px solid gray; 
 
    border-radius: 20vw; 
 
    background-color: #e0e0eb; 
 
} 
 
#bName { 
 
    word-wrap: break-word 
 
} 
 
#child { 
 
    width: 50%; 
 
    height: 30%; 
 
    margin: auto; 
 
}

<div class="theCircle"> 
 
    <div class="bubble">text inside the bubble</div> 
 
    <div class="innerCircle"> 
 
    <div id="bName"> 
 
     <div id="child">I need this to start in the middle of the circle, and to go upwards when there is a lot of text like this</div> 
 
    </div> 
 
    </div> 
 
</div>

良い方法でしょう

チェックこのcodepen参照this

・ホープこれはあなたがCSS3のフレキシボックスのプロパティを使用することによってこの問題を解決することができます