私は画面の中央に合わせてタイトルを中央に置いていますが、コンテナは画面の幅の100%を占めていません。オフセット付きの切り詰めテキストの中央揃え - CSSのみ
また、テキストを切り捨てる必要があります。右側にパディングを残したくない場合もあります。
This is what I've got so far - JSFiddle。黄色のdivのテキストがテキストの下線に沿って並んでいないことがわかります。黄色のdivにpadding-rightを追加すると、サイズ変更時に黄色のdivの100%がテキストに表示されません。助言がありますか?
HTML
<div class="cont">
<div class="left-h">
place holder
</div>
<div class="middle-h">
my very long long title goes here
</div>
</div>
<div class="real-center">
my very long long title goes here
</div>
CSS
.cont{
width: 100%;
border: 1px solid black;
display: flex;
text-align: center;
}
.left-h{
flex-basis: 150px;
background-color: #e5e5e5;
}
.middle-h{
background-color: yellow;
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.real-center{
width: 100%;
text-align:center;
}
スニペット? – Banzay
実際の場所は、次のようなものです。私は視覚的な参照としてのみ追加しますが、タイトルは黄色のdivにのみ表示する必要があります –
あなたはそれが必要ですか?:https://jsfiddle.net/banzay52/pzbk869h/ – Banzay