html的div的top,html - CSS - fix div to top center - Stack Overflow

最新推荐文章于 2022-03-16 18:12:44 发布

裴崽崽

最新推荐文章于 2022-03-16 18:12:44 发布

阅读量131

点赞数

文章标签： html的div的top

博主分享了如何在HTML页面中，将一个具有固定宽度和高度的div元素在header内居中，并确保在屏幕大小变化时仍保持在设计布局的中心，而不是屏幕中心。通过在header和logo之间添加一个宽度与设计宽度相同的div解决了问题。解决方案的JSFiddle链接也已提供。

摘要由CSDN通过智能技术生成

I would like to center a div inside of the header which is 100% width. The div that needs to be centered has a physical width and height. I have tried using position absolute, but when resizing the screen, the div will stay centered. I want the div to stay in the center of the design, not the screen. How do I accomplish this? I also do not want to use position fixed for this.

css:

header{

position: relative;

width: 100%;

height: 65px;

background-color: #662D91;

}

#banner{

position: absolute;

left: 50%;

margin-left: -240px;

width: 480px;

height: 115px;

border-radius: 20px;

}

HTML:

EDIT: I have solved my issue by adding a div between the full width header and the logo that is the width of the design. It appears to have fixed my problem.

JSFiddle of my solution to my problem: http://jsfiddle.net/U3Hpa/2/