CSS - 在 DIV 中对齐文本、输入和图像

Question

我正在尝试对齐一些文本、输入字段和大约 25x25 像素的图像

我得到的是 div 顶部的文本和图像，以及稍微下方的输入。

我如何对齐它们，使它们彼此垂直水平。

这是我到目前为止所拥有的：

div.block {overflow:hidden; border:1px solid #000 }

div.block label {width:150px; display:block; float:left; text-align:left; vertical-align:middle; }

div.block.input {margin-left:4px; float:left; vertical-align:middle; }

https://jsfiddle.net/a3cmfpzL/

谢谢

Answer 1

这是水平的：.block{&nbsp; display:flex;}label{&nbsp; border:1px solid red;}img{&nbsp; height:25px;&nbsp; width:25px;}<div class='block'><label>Test Label</label><input type='text' value='1234567890'/><img src='http://placekitten.com/301/301'/></div>如果您正在寻找垂直方向，那么：*{&nbsp; border:0;&nbsp; padding:0;}.block{&nbsp; display:flex;&nbsp; flex-direction:column;}label{&nbsp; border:1px solid red;&nbsp;width:100px;}img{&nbsp; height:25px;&nbsp; width:25px;}<div class='block'><label>Test Label</label><input type='text' value='1234567890'/><img src='http://placekitten.com/301/301'/></div>

Answer 2

尝试在 div.block 中添加position:absolute和。display:flex如果我正确理解你的问题，那应该可以解决问题。

Answer 3

我强烈建议你使用flexbox。一开始可能会有点混乱，但是一旦掌握了窍门，您就会喜欢它。在这里您可以找到完美的使用指南。https://css-tricks.com/snippets/css/a-guide-to-flexbox/像这样的东西（只是我脑子里写的，所以未经测试）尝试先删除你的课程。你的CSS.flex {&nbsp; &nbsp; display: flex;&nbsp;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; justify-content: space-between; // only use this if you don't justify-self the elements}.border {&nbsp; &nbsp; border:1px solid #000;}img {&nbsp; &nbsp; width: 25px;&nbsp; &nbsp; height: 25px;&nbsp; &nbsp; justify-self: top; // if you don't use flex-direction on .flex}input {&nbsp; &nbsp; justify-self: top; // if you don't use flex-direction on .flex}您的 HTML<div style="flex border">&nbsp; &nbsp; <img src='image.png'/>&nbsp; &nbsp; <label>Test Label</label>&nbsp; &nbsp; <input type='text' value='1234567890'/></div>

Answer 4

几个问题这div.block.input没有选择任何内容，因此所有这些样式都没有被使用您将标签设置为块级元素，因此它不会响应该vertical-align属性。和<input>是<img>内联元素，因此它们将共享它们所在的同一行框，它们的垂直对齐方式将由属性设置vertical-align。属性的默认值vertical-align是基线：将框的基线与父框的基线对齐。如果该框没有基线，请将下边距边缘与父级的基线对齐。在本例中，我们有一个<img>没有基线的图像，因此它将根据其底部边距进行对齐，在我们的示例中，img 没有边距，因此它基本上是底部边缘。然而<input>有一个基线，所以它的基线将与它旁边的img的下边缘对齐。演示版div.block {&nbsp; overflow: hidden;&nbsp; border: 1px solid #000}div.block label {&nbsp; width: 150px;&nbsp; display: block;&nbsp; float: left;&nbsp; text-align: left;&nbsp; vertical-align: middle;}div.block.input {&nbsp; margin-left: 4px;&nbsp; float: left;&nbsp; vertical-align: middle;}div {&nbsp; position: relative;}div:after {&nbsp; content: '';&nbsp; position: absolute;&nbsp; left: 0;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; background: linear-gradient(red, red) 0 24.5px/ 100% 1px no-repeat}<p>red line is the baseline</p><div class='block'>&nbsp; <label>Test Label</label>&nbsp; <input type='text' value='1234567890' />&nbsp; <img src='https://i.picsum.photos/id/527/25/25.jpg' /></div>解决方案我清理了一些代码并删除了不必要的样式。浮动不是必需的如果您要对标签应用宽度，请display:inline-block;改用1）垂直对齐：中间；* {&nbsp; padding: 0;&nbsp; margin: 0;}div.block {&nbsp; overflow: hidden;&nbsp; border: 1px solid #000}label {&nbsp; width: 150px;&nbsp; display: inline-block;&nbsp; vertical-align: middle;&nbsp; background: brown;}input {&nbsp; vertical-align: middle;&nbsp; border: 0;&nbsp; background: red;}img {&nbsp; vertical-align: middle;}<div class='block'>&nbsp; <label>Test Label</label>&nbsp; <input type='text' value='1234567890' />&nbsp; <img src='https://i.picsum.photos/id/527/25/25.jpg' /></div>项目将相对于最高项目（即 img）的中间对齐。2）如果你想让元素共享相同的高度知道了<img>最高的元素和它的高度，我们可以简单地将相同的高度应用于其他元素，我们仍然需要vertical-align:top根据元素的顶部边缘而不是基线来对齐元素* {&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; /* because we defined a height on the element,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;we need to ensure that any extra space should be&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;calculated within that height */&nbsp; &nbsp; box-sizing: border-box;}div.block {&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; border: 1px solid #000;&nbsp; &nbsp; font-size:0;}label {&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; width: 150px;&nbsp; &nbsp; height: 25px;&nbsp; &nbsp; font-size:16px;&nbsp; &nbsp; vertical-align: top;&nbsp; &nbsp; line-height:25px;&nbsp; &nbsp; background:brown;}input {&nbsp; &nbsp; height: 25px;&nbsp; &nbsp; vertical-align: top;&nbsp; &nbsp; border:0;&nbsp; &nbsp; background:red;}<div class='block'>&nbsp; <label>Test Label</label>&nbsp; <input type='text' value='1234567890' />&nbsp; <img src='https://i.picsum.photos/id/527/25/25.jpg' /></div>3) 弹性盒这是最简单的，我不会介绍，因为它已在其他答案中介绍过。