如何收縮div來適應自動換行文本

我有一個圖片和文字旁邊Flex容器。該容器在頁面上居中。當我縮小導致文本換行的頁面時，容器不再看起來居中，因爲文本div不縮小到單詞換行文本的大小。如何收縮div來適應自動換行文本

是否有可能時，自動換行發生收縮文本的div？

見的jsfiddle here。

可能很難看到我在說什麼與片段，因爲您可能無法縮小頁面以查看換行發生的情況。最好看看jsfiddle。

.container, 
 
.content { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.picture { 
 
    height: 130px; 
 
    width: 130px; 
 
    background-color: blue; 
 
} 
 
.text { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    margin-left: 10px; 
 
} 
 
.name { 
 
    font-size: 22px; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    <div class="picture"></div> 
 
    <div class="text"> 
 
     <div class="name">John Jacobjingleheimer</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2016-09-29 user4584963

添加一個'的text-align：center'到'name'和它看起來更好地適應我猜...你覺得呢？ – kukkuz

@kukkuz感謝，但不是真的我在找什麼。它實際上可能不可能。一旦單詞包裝發生，容器不再看起來居中，因爲右側比左側看起來更多。 – user4584963

可能重複：使容器收縮到合適的子元素，因爲它們包裹（http://stackoverflow.com/q/37406353/3597276） –

我不知道這是你要找的，但是從閱讀你寫什麼，我認爲你正在尋找

margin-left: auto; 
margin-right: auto;

以上答案保證金左：和保證金右：使用自動值將導致瀏覽器窗口中自動計算的

左，右頁邊距

.text { 
    display: flex; 
    margin-left: auto; 
    margin-right: auto; 
    flex-direction: column; 
    justify-content: center; 
}

來源

2016-09-29 15:36:37

不完全是。當您縮小頁面瀏覽器寬度並且發生換行時，左邊距大約爲8px，但在右邊看起來像30px。它實際上並不是30，但似乎是這樣，因爲名稱所在的div並沒有縮小到姓氏的邊緣。 – user4584963

如何收縮div來適應自動換行文本

回答

相關問題