如何在所有其他div和所有其他div上显示一个div应该居中? [英] How to show one div over all other and all other divs should be centered?
本文介绍了如何在所有其他div和所有其他div上显示一个div应该居中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在设计一个html page.link https://codepen.io/KARANVERMA5/pen/oqKJma 。
我需要将按钮和进度条全部对齐到中心并显示在文字云后面。
请指出我正确的方向,这里有什么不对,为什么栏不显示在词云下面。如何在顶部显示wordcloud以及在其下方的所有其他内容div居中?
我尝试过:
I am designing a html page.link https://codepen.io/KARANVERMA5/pen/oqKJma .
I need to have the button and progress bar all aligned to center and shows behind the word-cloud.
Please point me in right direction that what is wrong here, why the bar is not showing below the word-cloud. How can I show wordcloud at top and all other things divs below it centered?
What I have tried:
#word-cloud {
position:fixed;
height: 100vh;
max-height: 100%;
width: 100vw;
max-width: 100;
margin:-300px auto auto -250px;
top:20%;
left:70%;
text-align:center;
z-index:1;
}
body,
html {
margin: 0;
padding: 0;
}
.bar {
position:relative;
border: 1px solid #666;
height: 5px;
width: 100px;
margin:-300px auto auto -250px;
z-index: 2;
}
.bar .in {
-webkit-animation: fill 10s linear 1;
animation: fill 10s linear 1;
height: 100%;
background-color: red;
}
@-webkit-keyframes fill {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
推荐答案
我可以给你一些明确的指示 - 这是最好的你可以学习的方式。
1 - 看看CSS样式:z-index来控制图层。什么命令的价值?怎么样?
2 - 居中div等:margin:0 auto 0 auto;这就是诀窍。
它告诉浏览器没有上/下边距,自动左右边距。
3 - 如果你覆盖的东西,他们仍然真的需要一个容器。再一次,一种风格,
背景颜色:透明;
我主要使用< div>一切的元素。我甚至通过点击事件或链接以某种方式制作按钮。更灵活。如果你愿意,你可以删除链接文本下面的行。
你仍然需要玩这些 - 这是学习的部分。 />
I can give you some definite pointers - which is the best way for you to learn.
1 - look at CSS styles: z-index to control layers. What orders the values? How?
2 - centering div's and the like: margin: 0 auto 0 auto; is the trick for that.
It's telling the browser no top/bottom margins, automatic right and left margins.
3 - if you're overlaying things, they still really need a container. Again, a style,
background-color:transparent;
I work mainly with <div> elements for everything. I even make buttons that way, at times, with an on-click event or link. More flexability. You can get rid of the line under the link text if you wish.
You'll still need to play around with these - which is the learning part.
这篇关于如何在所有其他div和所有其他div上显示一个div应该居中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文