Question

我试图将图像置于一个范围内。但它没有用。

以下是我的代码的链接：jsfiddle

<div>
    <label>
        <span>left span that can have more than one line</span>
        <span><img class="redcross" /></span>
    </label>
</div>

课程＆＃34; redcross＆＃34;是我想要垂直居中的

有人可以帮助我吗？

Answer 1

更改 css ：

.button {
    position:absolute;
  width:24px;
  height:100%;
  top:3px;
  right:0;
}

排名前0到3px;

Answer 2

删除right和margin-right，添加position: absolute和margin-top: -11px

.redcross {
  float: right;
  display: inline-block;
  background-color: #94B548;
  /*background-color: rgba(0,0,0,.3);*/
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20style%3D%22fill%3A%23FFFFFF%3B%22%20points%3D%2211.949%2C3.404%207%2C8.354%202.05%2C3.404%20-0.071%2C5.525%207%2C12.596%2014.07%2C5.525%20%22%2F%3E%3C%2Fsvg%3E");
  -webkit-border-radius: 1em;
  border-radius: 1em;
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  top: 50%;
  position: absolute;
  margin-top: -11px;
}

jsfiddle

Answer 3

我确定外星人先生意味着好。但我也在那里。无论如何，一个简单的步骤来获得你想要的东西：

将您的.button课程更改为

.button {
  vertical-align: middle;
  width:24px;
}

你知道，vertical-align属性并不像某些人认为的那样有效。它只影响内联元素。此外，它相对于当前行垂直对齐。所以，换句话说，如果你说在左边的一个文本块上有一行以上，在右边的一个按钮上有一行，那就不行了。

您需要在inline-block中包装该文本块并相应地调整line-height以获得相同的效果，使其垂直对齐。从本质上讲，这两个元素（文本块和img）的行为就像文本一样。这对于理解屏幕响应环境非常重要。

Answer 4

我会用 flexbox 来做。这是一个非常新近的功能，但非常有用。

只需将此行添加到.button班级。

display: flex;
align-items: center;

在这里你有working。绿色圆圈变形但我会考虑使用固定图像而不是边界半径。

您可以在此处查看其browsers compatibility

中心img内跨度

4 个答案: