垂直文本對齊，並填補其容器

我工作的一個移動響應式設計和我被困在那裏我需要顯示在一個圓圈中間的文本。文本將從數據庫中提取，因此文本有時可能很短或很長。我需要這個文本在內圈的中間開始，如果有文本的多條線路，讓文字去向上。爲了您的方便，我製作了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>

來源

2017-01-01 Mar1ak

你所說的「向上走」是什麼意思？ – guest271314

您可以通過使用CSS3 Flexbox的性能解決這個問題，有很多關於Flexbox的文檔的在線，這是相當真棒！

檢查該編輯的jsfiddle https://jsfiddle.net/2orwnfxv/3/

您只需通過添加顯示器，使您的內圓一個Flexbox的容器：彎曲;那麼你繼續集中所有東西

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

就這麼簡單。希望有所幫助！

來源

2017-01-01 06:57:39

謝謝你，就像一個魅力。 – Mar1ak

而是與周圍positions.I擺弄的猜測顯示：彎曲這裏將有好的辦法

檢查這個片段

* { 
 
    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

希望這有助於

來源

2017-01-01 06:42:17 Geeky

謝謝。你的回答工作在一定程度上，但調整窗口大小時，文本不結垢並最終滿溢出來的div。赫拉爾多Sabetta的回答將文字響應，則請檢查出來。 – Mar1ak

垂直文本對齊，並填補其容器

回答

相關問題