首页新闻找找看学习计划

两个div上下显示,并居中。

1
[已解决问题] 解决于 2018-11-04 16:49
<div class="outer">
            <div class="box in1">in1</div>
            <div class="box in2">
                    <form action = '' method="post">
                    <div class="calc" >
                    <div class="tab">
                        <span class="span">计算器</span>
                        <span>对照表</span>
                    </div>
                    <div class="inputcode" style="display: block;">
                          ............
                    </div></form>
            </div>
</div>

不太会html,勉强能用,但调整位置却头疼了。
in1 和in2 上下显示,并居中。
百度看了下,但效果都不好。

我自己想了个办法:
我以为在in1那个div 左边在加一个div,给它设个宽度来占位,这样in1不就可以调整到中间了吗。
可是问题是,”计算器“”对照表“ 这两行却跑到右上去了。

怎么让in1 和in2 上下显示,并居中。(span两行不能跑右上去了,它们是in2里面的,不能自己乱跑)

还没有的主页 还没有 | 菜鸟二级 | 园豆:475
提问于:2018-11-03 22:58

如果你只是单纯的让文本居中,在你的.box{text-align: center; }

rose_j 1年前
< >
分享
最佳答案
1

试了一下这样就可以了,我这种方式是outer 这个盒子是在浏览器垂直居中的
.outer {
width: 800px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
background: #fbfbfb;
margin-top: -300px;
margin-left: -400px;
}
.in1{
background-color:red;
}
.in2{
background-color:yellow;
}

奖励园豆:5
张林-布莱恩特 | 初学一级 |园豆:94 | 2018-11-03 23:32

谢谢,可以。
但在我的代码上面,还是有点小问题,不过调整好了。
气人的是:窗口大小一变又位置又不对了。

还没有 | 园豆:475 (菜鸟二级) | 2018-11-04 16:49
其他回答(1)
-1

看不到你的class样式,如果你的两个div是要相对于整个浏览器的大小居中,并且两个div的宽度都是已知固定的,则你给你的两个div都加一句margin: 0 auto;
例如:.in1{width:100px;margin:0 auto} .in2{width:200px;margin:0 auto}

rose_j | 园豆:202 (菜鸟二级) | 2018-11-03 23:22
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册