gpt4 book ai didi

html - 在 Div 中添加表单时垂直对齐不起作用

转载 作者:行者123 更新时间:2023-11-28 17:36:10 24 4
gpt4 key购买 nike

我(拼命地)试图在 div 的中间垂直对齐(中间)一个表单。我只是无法让它全部工作,所以我只是回到基础,将一个 div 垂直居中在另一个中间:

<div style='display: table-cell; vertical-align: middle; border: 1 solid blue; margin: 0px; padding: 0; width: 300px; height: 70px;'>
<div style='display: inline-block; border: 1 solid green;'>text</div>
</div>

这非常有效。我假设表单的行为相同,但是当我添加它时,我得到了一些非常奇怪的结果:

<div style='display: table-cell; vertical-align: middle; border: 1 solid blue; margin: 0px; padding: 0; width: 300px; height: 70px;'>
<div style='display: inline-block; border: 1 solid green;'>text</div>
<form style='display: inline-block; vertical-align: middle;'>
<label>Add Something:</label>
<input type='text' value='nothing in there'/>
</form>
</div>

enter image description here

如您所见,文本相对于蓝色框而不是表单居中。更糟糕的是,不添加 vertical-align: middle 到表单实际上是在改变文本的位置(绿色框)

<div style='display: table-cell; vertical-align: middle; border: 1 solid blue; margin: 0px; padding: 0; width: 300px; height: 70px;'>
<div style='display: inline-block; border: 1 solid green;'>text</div>
<form style='display: inline-block;'>
<label>Add Something:</label>
<input type='text' value='nothing in there'/>
</form>
</div>

enter image description here

我迷路了。请帮忙!

最佳答案

实际上,我最终将表单嵌入到绿色框内,将表单声明为表格单元格并将其垂直居中。它似乎有效:

<div style='display: table-cell; vertical-align: middle; border: 1 solid blue; margin: 0px; padding: 0; width: 300px; height: 70px;'>
<div style='display: inline-block; border: 1 solid green;'>
<form style='display: table-cell; vertical-align:middle;'>
<label>Add Something:</label>
<input type='text' value='nothing in there'/>
</form>
</div>
</div>

enter image description here

关于html - 在 Div 中添加表单时垂直对齐不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25046855/

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