gpt4 book ai didi

html - 垂直对齐 Div 中的文本

转载 作者:行者123 更新时间:2023-11-28 08:21:43 25 4
gpt4 key购买 nike

我正在尝试创建一个网站,但我在处理 2 个部分时遇到了问题;1. 我无法垂直对齐网站标题,使其位于 div 的中间。2. 我试图将菜单表与其正上方的标题 div 左对齐,并使其在所有浏览器类型中保持原样。

我曾尝试做不同的事情来使上述两者都起作用,但似乎没有任何效果,而且我无法对齐任何一个元素。有人可以帮帮我吗。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Game Portal</title>
<style>
body{
background-color: black;
}
h1.header{
font-family: "Trebuchet MS", Arial, sans-serif;
font-weight: bold;
font-size: 30px;
color: #fff;
text-transform: uppercase;
}
#headerdiv{
margin: 0px auto;
border: 1px solid red;
width: 70%;
height: 100px;
padding-top:30px;
}
th, td {
padding: 15px;
table-layout: fixed;
width: 180px;
height: 75px;
padding: 0px;
border-right-style: solid;
border-left-style: solid;
border-width: 1px;
border-color: #808080;
border-collapse: collapse;
}

td {
text-align: center;
font-family:"Times New Roman", Helvetica, sans-serif;
font-size: 15pt;
border-radius:5px
height: 100px;
}
a{
color: #808080;
}
#titleSize{
font-size: 25px;
}
#nav {
line-height:30px;
background-color:#4D4D4D;
height:80px;
width:100%;
}
</style>

</head>
<body>
<div id="headerdiv">
<h1 class="header">game<span id="titleSize">portal</span></h1>
</div>
<div id="nav">
<table style="background-color: #4D4D4D; padding-left: 15%;">
<tr>
<td><a href="">Home</a></td>
<td><a href="UnderConstruction.html">Games</a></td>
<td><a href="UnderConstruction.html">News</a></td>
<td><a href="UnderConstruction.html">Contact Us</a></td>
</tr>
<table>
</div>

</body>
</html>

我试过弄乱位置(绝对值、固定值、相对值)以及边距,但似乎没有任何元素会移动。提前致谢。

最佳答案

一种方法是通过填充:

  #headerdiv{
width: 200px;
margin:0px auto;
border: 1px solid red;
width: 70%;
height: 70px;
padding-top:30px;
}

此处 height 已更改,其余 100 已添加到 padding-top

关于html - 垂直对齐 Div 中的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28731357/

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