CSS - word-breakは要素の位置を変更します

私が書いたいくつかのwebservices用のダッシュボードを少し作ろうとしていますが、ウィジェット内のテキストが壊れるたびにウィジェットの位置が変わります。CSS - word-breakは要素の位置を変更します

CSSは次のようになります。

#container { 
    text-align: center; 
    width: 100%; 
    height: auto; 
} 

.widget { 
    background-color: firebrick; 
    margin: 1px; 
    width: 200px; 
    height: 200px; 
    display: inline-block; 
    text-align: center; 
    word-break: break-all; 
}

私はフィドルでその問題を再現：
https://jsfiddle.net/vbb6fhz0/1/

出典

2016-09-13 thetft

ボックスを揃えたい場合は、より良い結果を得るためにfloatを使用してください。ワードブレークはアラインメントとは関係ありません。

しかし、あなたの場合には、ちょうどvertical-align: middleはすごい愚かな私は...その助け

#container { 
 
    text-align: center; 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
.widget { 
 
    background-color: firebrick; 
 
    margin: 1px; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    word-break: break-all; 
 
    vertical-align: middle; 
 
}

<body> 
 
    <div style="width: 100%; height:100%;"> 
 
    <div id="container"> 
 
     <div class="widget"> 
 
     <p>1dawdawdaegsergsergsrsrgrsddadawdadawdwdwbf</p> 
 
     </div> 
 
     <div class="widget"> 
 
     2wdadawdad 
 
     </div> 
 
     <div class="widget"> 
 
     3wadawdwdawda 
 
     </div> 
 
     <div class="widget"> 
 
     4dawdawdaw 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</body>

出典

2016-09-13 13:16:54

完璧、ありがとう！ – thetft

あなたが浮いて試してみてください仕事休憩と悪いものは何もありません

.widget{float:left;}

出典

2016-09-13 13:07:43

アライメントの問題を解決しました！ありがとう！ – thetft

edit：これは奇妙な配置を助けましたが、私はウィジェットをdivの中央に配置したかったのです。 float：left;センタリングをオーバーライドします。 – thetft

CSS - word-breakは要素の位置を変更します

答えて

関連する問題