gpt4 book ai didi

html - 正文内容不会垂直居中

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

我创建了一个简单的网页(请忽略 php)。我想让正文中的所有内容居中 - 它水平对齐(通过 text-align:center),但我无法让它在顶部和底部垂直对齐。

JS Fiddle 链接:http://jsfiddle.net/6q1a1b01/1/

我试过:

margin: 0 auto 0 auto;
vertical-align: middle;

尽管进行了这两种尝试,但我很感激任何关于为什么内容没有垂直居中的见解。

HTML:

<body>
<h1>Welcome to my website!</h1>
<h2>Please login below.</h2>
<h3>Don't have an account? Create one here.</h3>

<div class="formFormat" >
<div id="table1">
<form name="loginForm" method="post" action="<?php? $_SERVER['PHP_SELF'];>" >
<table id="cssTable">
<tr>
<td>Username:</td><td><input type="text" id="user" name="user" value="<?php echo $user_name?>" /></td>
</tr>
<tr>
<td>Password:</td><td><input type="text" id="pass" name="pass" value="<?php echo $user_password?>"/></td>
</tr>
</table>
</form>
</div>

<div id="table2">
<form>
<table>
<tr>
<td><input type="submit" name="submitLogin"/></td>
</tr>
<tr>
<td id="createAccount">Create an account.</td>
</tr>

</table>
</form>
</form>
</div>
</div>

</body>
</html>

CSS:

body {
width: 100%;
height: 100%;
text-align:center;
font-family: helvetica;
font-color: white;
background-image: url(https://download.unsplash.com/photo-1429091967365-492aaa5accfe);
margin: 0 auto;
}


.formFormat{
padding: 10px;
height: auto;
width:auto;
border: 1px black solid;
display:inline-block;
position: relative;

}

#table1 {
padding-bottom: 0px;
}

#table2 {
display:inline-block;

}

#createAccount {
font-style: italic;
}

td {
padding: 5px;
font-size: 18px;
}

input[type="text"] {
border : 1px solid ;
}

input[type="submit"] {
border : 1px solid ;
}

最佳答案

试试这个 http://jsfiddle.net/6q1a1b01/3/ .

<body> 下方包含此代码

<div class="outer">
<div class="inner">

</body> 的正上方包含此代码

</div>
</div>

在您的 CSS 中包含此代码:

.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}

.inner {
display: table-cell;
vertical-align: middle;
}

关于html - 正文内容不会垂直居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30389835/

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