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{

  display:flex;

}

label{

  border:1px solid red;

}

img{

  height:25px;

  width:25px;

}

<div class='block'>

<label>Test Label</label>

<input type='text' value='1234567890'/>

<img src='http://placekitten.com/301/301'/>

</div>

如果您正在寻找垂直方向，那么：

*{

  border:0;

  padding:0;

}

.block{

  display:flex;

  flex-direction:column;

}

label{

  border:1px solid red;

 width:100px;

}

img{

  height:25px;

  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 {

    display: flex; 

    flex-direction: column;

    justify-content: space-between; // only use this if you don't justify-self the elements

}

.border {

    border:1px solid #000;

}

img {

    width: 25px;

    height: 25px;

    justify-self: top; // if you don't use flex-direction on .flex

}

input {

    justify-self: top; // if you don't use flex-direction on .flex

}

您的 HTML

<div style="flex border">

    <img src='image.png'/>

    <label>Test Label</label>

    <input type='text' value='1234567890'/>

</div>

Answer 4

几个问题

1. 这div.block.input没有选择任何内容，因此所有这些样式都没有被使用

2. 您将标签设置为块级元素，因此它不会响应该vertical-align属性。

和<input>是<img>内联元素，因此它们将共享它们所在的同一行框，它们的垂直对齐方式将由属性设置vertical-align。

属性的默认值vertical-align是基线：

将框的基线与父框的基线对齐。如果该框没有基线，请将下边距边缘与父级的基线对齐。

在本例中，我们有一个<img>没有基线的图像，因此它将根据其底部边距进行对齐，在我们的示例中，img 没有边距，因此它基本上是底部边缘。

然而<input>有一个基线，所以它的基线将与它旁边的img的下边缘对齐。

演示版

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;

}

div {

  position: relative;

}

div:after {

  content: '';

  position: absolute;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(red, red) 0 24.5px/ 100% 1px no-repeat

}

<p>red line is the baseline</p>

<div class='block'>

  <label>Test Label</label>

  <input type='text' value='1234567890' />

  <img src='https://i.picsum.photos/id/527/25/25.jpg' />

</div>

解决方案

我清理了一些代码并删除了不必要的样式。

1. 浮动不是必需的

2. 如果您要对标签应用宽度，请display:inline-block;改用

1）垂直对齐：中间；

* {

  padding: 0;

  margin: 0;

}

div.block {

  overflow: hidden;

  border: 1px solid #000

}

label {

  width: 150px;

  display: inline-block;

  vertical-align: middle;

  background: brown;

}

input {

  vertical-align: middle;

  border: 0;

  background: red;

}

img {

  vertical-align: middle;

}

<div class='block'>

  <label>Test Label</label>

  <input type='text' value='1234567890' />

  <img src='https://i.picsum.photos/id/527/25/25.jpg' />

</div>

项目将相对于最高项目（即 img）的中间对齐。

2）如果你想让元素共享相同的高度

知道了<img>最高的元素和它的高度，我们可以简单地将相同的高度应用于其他元素，我们仍然需要vertical-align:top根据元素的顶部边缘而不是基线来对齐元素

* {

    padding: 0;

    margin: 0;

    

    /* because we defined a height on the element, 

       we need to ensure that any extra space should be   

       calculated within that height */

    box-sizing: border-box;

}

div.block {

    overflow: hidden;

    border: 1px solid #000;

    font-size:0;

}

label {

    display: inline-block;

    width: 150px;

    height: 25px;

    font-size:16px;

    vertical-align: top;

    line-height:25px;

    background:brown;

}

input {

    height: 25px;

    vertical-align: top;

    border:0;

    background:red;

}

<div class='block'>

  <label>Test Label</label>

  <input type='text' value='1234567890' />

  <img src='https://i.picsum.photos/id/527/25/25.jpg' />

</div>

3) 弹性盒

这是最简单的，我不会介绍，因为它已在其他答案中介绍过。