center 相关问题

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Homepage</title> <link href="style.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="logo"><h2>Header Logo</h2></div> <div class="navbar"> <ul> <li><a href="index.html">header link one</a></li> <li><a href="index.html">header link two</a></li> <li><a href="index.html">header link three</a></li> </ul> </div> <div class="text1"><h2>This website is awesome</h2></div> <div class="text2">This website has some subtext that goes here under the main title.It's a smaller font and the color is lower contrast <div class="button1"> <div class="text4">Sign up</div> </div> </div> <div class="placeholder"> <div class="text3">this is a placeholder for an image</div> </div> </div> <div class="container2"> <div ID="text5"class="text5"> Some random information. </div> <div class="box1" id="box1"></div> <div class="box2" id="box2"></div> <div class="box3" id="box3"></div> <div class="box4" id="box4"></div> </div> <div class="footer"> Copyright © The Odin Project 2023 </div> </body> </html> * { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 100%; height: 45vh; background-color: #1f2937; position: static; display: flex; } .footer { position: absolute; bottom: 0px; width: 100%; height: 10vh; background-color: #1f2937; color: white; text-align: center; display: flex; justify-content: center; align-items: center; } .logo { font-size: 24px; font-family: 'Times New Roman', Times, serif; color: white; justify-content: space-between; padding-top: 15px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; padding-left: 200px; position: absolute; top: 0; } .navbar { color:white; font-size: 18px; position: fixed; width: 85%; top: 0; right: 0; margin: auto; display: flex; align-items: center; justify-content: flex-end; flex-direction: row; padding-top: 15px; padding-right: 330px; } .navbar ul li { list-style: none; display: inline-block; margin: 0 20px; text-decoration: none; } .text1 { position: relative; color: white; padding-left: 200px; font-size: 48px; font-weight: bold; width: 720px; top: 100px; } .text2 { position: relative; color: white; font-size: 18px; width: 400px; height: 200px; top: 300px; right: 520px; } .placeholder{ position: relative; width: 500px; height:250px; background-color: grey; border: 2px solid grey; display:flex; top: 100px; right: 120px; align-items: center; justify-content: center; color: white; } .button1{ border-radius: 5px; position: relative; display: flex; font-weight: bold; border: 2px solid #3882F6; background-color:#3882F6; height:40px; width: 120px; justify-content: center; align-items: center; } .container2{ height: 45vh; background-color: white; position: relative; padding-top: 30px; display: flex; flex-direction: row; justify-content: space-evenly; } #text5{ font-size: 36px; font-weight:800; text-align: center; } #box1, #box2, #box3, #box4{ position: relative; border: 2px solid #3882F6; height: 100px; width: 100px; bottom: -100px; right: 250px; border-radius: 25px; flex: 0 0 100px; } 为什么 class="text5" 不将文本移向中心？截至目前，文本位于左侧。我尝试过 text-align=center 但没有产生任何结果。和级联有关系吗？我还尝试在其上设置宽度和边距：0 auto;这将文本移动但没有移动到中心并弄乱了我的框的间距。 Text5 是 Container2 的子级，Container2 是一个 Flexbox。 Flexbox 控制其子项的水平位置。也许您想将 Text5 移到 Container2 之外？也许在它之前？

html css center

回答 1 投票 0

显示Flex水平居中问题

我在将 div 中的元素居中时遇到问题。我使用 display flex、align-self 和 justify-self 将其居中。我认为这样就可以了，但是当我从 t 检查时，我有一个未知元素......

css flexbox center display

回答 4 投票 0

将加载 div 置于可滚动内容的中心

是否可以在可滚动内容中将加载 svg 和文本的容器居中（屏幕中间）？内容有时不可滚动。我设法将其垂直居中，但我...

html css center

回答 1 投票 0

如何在浏览器屏幕中央对齐两个非固定宽度的div？

我想在屏幕中央对齐两个非固定宽度的 div，并且希望它们都出现在同一水平面上。我希望左侧 div 的右边缘和左侧之间没有边距