gpt4 book ai didi

html - 水平和垂直居中 div 元素

转载 作者:行者123 更新时间:2023-11-28 10:48:44 25 4
gpt4 key购买 nike

我无法将网页内容居中。这是我的 HTML 的修剪版本以及与该 HTML 代码相关的所有 CSS。

<body>
<div id="foo">

<div id="bar">
<!-- more html -->
</div>
</div>

#foo {
width: 80%;
display: inline-block;
margin: 0 auto;
position: center;
background: none;
margin-top: -0.2em;
}

#foo div {
display: inline-block;
}

#bar {
margin: 0 auto;
margin-top: -1em;
}

内容固定在浏览器窗口的左上角。我希望它水平和垂直居中。我如何实现这一点?

编辑:我最初写的是右上角,但意思是左上角。

最佳答案

不是position:center而是text-align:center;让内容居中对齐

检查fiddle

#foo {
width: 80%;
display: inline-block;
margin: 0 auto;
text-align:center;
background: none;
margin-top: -0.2em;
}

并删除 ma​​rgin-top:-1em 它会将子 div = bar 移动到顶部并且内容将被隐藏检查下面

#bar {
margin: 0 auto;
/*margin-top: -1em;*/
border:1px solid red;
}

检查fiddle

关于html - 水平和垂直居中 div 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22869255/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com