這個問題在這里已經有了答案： 左、中、右對齊 3 個不相等的塊 4 個答案 13 小時前關閉。
我有以下 HTML 結構（不能更改）：
<div className='spritz'>
<div className='left'></div>
<div className='middle'></div>
<div className='right'></div>
</div>
中間有一個字母，其中包含隨機單詞的中間字母，左右有其余字母。
我如何設定它的樣式，無論我生成什么型別??的單詞，中間字母都會出現在螢屏中間？
例如：
Hello // (Right = He, Middle= l, Left = lo
How // (Right = H, Middle= o, Left = w
Wonderful // (Right = Wond, Middle= e, Left = rful
Different
Hi
謝謝！！
uj5u.com熱心網友回復：
CSS-Grid 可以做到這一點。
.spritz {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
body {
position: relative;
}
body::after {
content: "";
width: 1px;
height: 100vh;
position: absolute;
background: red;
left: 50%;
top: 0;
}
.left {
text-align: right;
}<div class='spritz'>
<div class='left'>Spider</div>
<div class='middle'>-</div>
<div class='right'>Man</div>
</div>
<div class='spritz'>
<div class='left'>Wonder</div>
<div class='middle'>W</div>
<div class='right'>oman</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/413009.html
標籤：
上一篇：CSS不能影片旋轉
下一篇：其他CSS元素中的CSS元素