CODEWITHSUNDEEP
htmlcss
beginner
beginner

Reputation: 85

center img inside span

I'm trying to center an image inside a span. But it doesn't work.

Here is a link to my code: jsfiddle

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

the class "redcross" is what I want to center vertically

can someone help me?

Upvotes: 1

Views: 826

Answers (4)

nanocv
nanocv

Reputation: 2229

I would do it with flexbox. It's a very recent feature but very useful.

Just add this lines to your .button class.

display: flex;
align-items: center;

Here you have it working. The green circle gets deformed but I would consider using a fixed image instead the border-radius.

Here you can see its browsers compatibility

Upvotes: 0

Philll_t
Philll_t

Reputation: 4437

I'm sure Mr. Alien means well. But I was there too. Anyway, a simple steps to get what you are looking for:

Change your .button class to

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

You see, the vertical-align property doesn't quite work how some people think it does. It only affects inline elements. Furthermore, it aligns it vertical relative to the current line. So, in other words, if you were to say have more than one line on a block of text to the left and a button to the right, this wouldn't work.

You would need to wrap that block of text in an inline-block and adjust the line-height accordingly to get this same effect for it to be vertically aligned. Essentially, the two elements (block of text and img) would be behaving like text. This is important to understand especially in a screen responsive environment.

Upvotes: 0

Tomasz Jakub Rup
Tomasz Jakub Rup

Reputation: 10680

Remove right and margin-right, Add position: absolute and 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

Upvotes: 0

David Coder
David Coder

Reputation: 1138

Change your css:

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

top 0 to 3px;

Upvotes: 1

Related Questions