ページには大きな div があり、この大きな div には 3 つの小さな div があり、最初の div は左揃え、3 番目の div は右揃え、2 番目 (つまり中央) の div は中央揃えになります。それを達成するにはどうすればよいでしょうか?左の div と右の div の幅と高さは固定されています。重要なのは、中央の div の幅が固定されていないということです。
前提条件は次のとおりです: 大きな div の幅は固定幅: 100% ではありません。
下の図では、左側の返された画像は左揃えであり、右側の 3 つの点は右揃えであり、「統合」中央の「center」は中央に配置されます。実装するには3つのdivを使用します。左右のdivは固定幅で、それぞれ左側と右側に一時停止されます。中央のdivはどうですか？中心に置くにはどうすればよいでしょうか？
中央に大きな div を使用し、両側の div を両方に固定するには絶対配置を使用します。
中央の div に margin:0 auto; を追加します。
そうすれば、3 階で述べたように絶対に配置されます
。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">.div1{width:100%;line-height:50px;background:#FFC}.left{float:left;width:100px;background:#9C6}.right{float:right;width:100px;background:#0CF}.center{text-align:center;}</style><script type="text/javascript"></script></head><body> <div class="div1"> <div class="left">左侧</div> <div class="right">右侧</div> <div class="center">积分中心</div> </div></body></html><style type="text/css">*{margin:0;padding:0}.box{position:relative;height:50px;background:#fafafa}.center{text-align:center;height:50px;line-height:50px}.left,.right{position:absolute;background:#f00;width:50px;height:30px;top:10px}.left{left:0}.right{right:0}</style><div class="box"> <div class="left">左</div> <div class="center">中</div> <div class="right">右</div></div>
<style type="text/css">*{margin:0;padding:0}.box{position:relative;height:50px;background:#fafafa}.center{text-align:center;height:50px;line-height:50px;background:yellow;padding:0 70px;}.left,.right{position:absolute;background:#f00;width:50px;height:30px;top:10px}.left{left:0}.right{right:0}</style>皆さんありがとう、解決しました
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
