Insert Image with CSS Without Line Break

Question

Insert Image with CSS Without Line Break

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

I have the following problem, when I insert some photo with the background it is breaking line:

Iwantedthemtobealigned:
Ex:[Imagem]-[Imagem]

HTML:

<spanid="vote"><a href="#" return false;">
        <div class="like"></div>
    </a> - <a href="#" return false;">
        <div class="unlike"></div>
    </a></span>

CSS:

.like {  background: url('../../common/botoes/like-button.png') no-repeat center center;     background-position: center; background-size: 24px 24px; height: 24px; }
.unlike {  background: url('../../common/botoes/unlike-button.png') no-repeat center center;     background-position: center; background-size: 24px 24px;  height: 24px; }

Note the id vote has nothing referenced in css.

html css imagem

asked by anonymous 04.03.2018 / 17:43

2 answers

0

Since you gave height to divs , you also need to give width . And convert the divs to inline-block , so they can be side by side (the example icon below is illustrative only):

.like {
   background: url('http://www.axiomtek.com/Download/SocialLink/en-US/Social_icon_2.svg') no-repeat center center;
   background-position: center; 
    background-size: 24px 24px;
    height: 24px;
    width: 24px;
    display: inline-block;
}

.unlike {
   background: url('http://www.axiomtek.com/Download/SocialLink/en-US/Social_icon_2.svg') no-repeat center center; 
    background-position: center; 
    background-size: 24px 24px;
    height: 24px;
    width: 24px;
    display: inline-block;
}

<span id="vote">
   <a href="# return false;">
      <div class="like"></div>
   </a>
   <a href="# return false;">
      <div class="unlike"></div>
   </a>
</span>

CSS Code Enhancements

Your code has some unnecessary noises .

You do not need to center center twice. Just one that already aligns on both axes.

Avoid repetitive codes. It is good to group same styles to different elements in a single block:

.like,
.unlike{
   background-size: 24px 24px;
   height: 24px;
   width: 24px;
   display: inline-block;
}

The individual styles you place separately:

.like {
   background: url('https://78.media.tumblr.com/avatar_3e32d6779210_16.pnj') no-repeat center;
}

.unlike {
   background: url('https://78.media.tumblr.com/avatar_3e32d6779210_16.pnj') no-repeat center; 
}

04.03.2018 / 17:59

Problem sending images to a folder with accented names How to generate HTML at a specific point on the page?

score 3 · Accepted Answer

Uncheck - .

I put the blue background just to have a sense of the container

Using display: flex; ...

#vote {
  background: dodgerblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

.like {  
  background: url('http://plugcitarios.com/wp-content/uploads/2013/06/like.jpg') no-repeat center center;     
  background-position: center; 
  background-size: 24px 24px; 
  width: 24px;
  height: 24px; 
}
.unlike {  
  background: url('http://www.ironmonk.net/wp-content/uploads/2014/09/unlikefanpage.png') no-repeat center center;     
  background-position: center; 
  background-size: 24px 24px;  
  width: 24px;
  height: 24px; 
}

<span id="vote">
  <a href="#">
    <div class="like"></div>
  </a> 
  <a href="#">
    <div class="unlike"></div>
  </a>
</span>

Now using float: left;

#vote {
  background: dodgerblue;
}

.like {  
  background: url('http://plugcitarios.com/wp-content/uploads/2013/06/like.jpg') no-repeat center center;     
  background-position: center; 
  background-size: 24px 24px; 
  width: 24px;
  height: 24px; 
}
.unlike {  
  background: url('http://www.ironmonk.net/wp-content/uploads/2014/09/unlikefanpage.png') no-repeat center center;     
  background-position: center; 
  background-size: 24px 24px;  
  width: 24px;
  height: 24px; 
}

.like, .unlike {
  float: left;
}

<span id="vote">
  <a href="#">
    <div class="like"></div>
  </a> 
  <a href="#">
    <div class="unlike"></div>
  </a>
</span>

When to use float and flex

Well it depends on your audience, if most uses old browser, not many, but some people still use Internet Explorer, because it already comes installed in the Window, and display: flex would not be appropriate for such, as it is more for current browsers. you can take a look at the compatibility:

link

float is good in most browsers, but it's harder to set up a layout with float [in my opinion].

link

Tip I'm preferring flex lately, but as I said, it depends on the circumstance.

You can see here the most used browsers in Brazil:

link

Final

Even though I would be flex if I were you, because as you can see Internet explorer does not help much, but in compensation, most other browsers support, if not partially.