Question

css如何设置div居左 居中和居右

想写一个网页 3个宽度为200px的div 在同一行内分别居左 居中 和居右 该怎么写css？谢谢

Answer 1

<style>
div {position:absolute; width:200px; height:400px}
div.left {left:0; background-color:red}
div.center {left:50%; margin-left:-100px; background-color:green}
div.right {right:0; background-color:blue}
</style>
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>

追问

这样写左边的的确居左了 右边的也的确居右了 但是中间的并不居中啊 是在中间偏右的位置上了

追答

我这测试不会啊，你是改了宽度么？

改了宽度的话，那个-100px的100要改为宽度的一半

Answer 2

<style>
.wrapper {
    display: flex;
    justify-content: space-between;
}
.left, .center, .right {
    width: 200px;
    height: 300px; /*高度随意*/
}
</style>
<div class='wrapper'>
    <div class='left'></div>
    <div class='center'></div>
    <div class='right'></div>
</div>