Image with horizontal hr centered vertically in half

Question

Good,

I have here a problem that in putting one <h1> followed by an image and a <hr> as in the following image.

With the following code:

<div id="bola"><h4 style="text-align: left; display:block">Bibliotecas</h4>
<div id="bola2">
      <img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva" style="float:left; display:inline-block"/>
      <hr style="height:3px;width:100px;border-width:0;color:#D29E1D;background-color:#D29E1D;float:left">
</div>
</div>

And I can’t put it right. Someone knows why?

Answer 1

Iae I would only do with CSS, without using images and using absolute.

Run and see the result. Of course you can change as you wish.

Follows the Scritp:

div.baseLogo {
  position: relative;
  width: 300px;
}
h4.textoLogo {
  text-align: left;
  font-size: 25px;
  display: block;
}
div.bolaCss {
  position: absolute;
  border: 3px solid #D29E1D;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  top: 5px;
  left: 130px;
}
div.linhaDireita {
  position: absolute;
  border-top: 3px solid #D29E1D;
  top: 16px;
  left: 153px;
  width: 100px;
}

<div class="baseLogo">
  <h4 class="textoLogo">Bibliotecas</h4>
  <div class="bolaCss"></div>
  <div class="linhaDireita"></div>
</div>

VERSION USING AN IMAGE

div.baseLogo {
  position: relative;
  width: 300px;
}
h4.textoLogo {
  text-align: left;
  font-size: 25px;
  display: block;
}
div.bolaImagem {
  position: absolute;
  top: 5px;
  left: 130px;
}
div.linhaDireita {
  position: absolute;
  border-top: 3px solid #D29E1D;
  top: 16px;
  left: 153px;
  width: 100px;
}

<div class="baseLogo">
  <h4 class="textoLogo">Bibliotecas</h4>
  <div class="bolaImagem">
    <img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva">
  </div>
  <div class="linhaDireita"></div>
</div>

Answer 2

Good,

First you have to be careful with the closing of tags.

One of the ways you have to align elements is by using the float

<div id="bola"><h4 style="text-align: left; display:block">Bibliotecas</h4></div>
<div id="bola2">
      <img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva" style="float:left; display:inline-block"/>
      <hr style="height:3px;width:100px;border-width:0;color:#D29E1D;background-color:#D29E1D;float:left"></hr>
</div>

Here I just closed the tags that weren’t closed

I added this CSS

#bola{
   float: left;
}

#bola2 {
     float: left;
     margin-top: 20px;
}

Here’s the FIDDLE where you can test

P.S. I used the margin-top to focus more or less on #bola2 in relation to #bola

ALTERNATIVE

If you do not want to use a file CSS to save styles, you can always add HTML

  <div id="bola"style="float: left">
        <h4 style="text-align: left; display:block">Bibliotecas</h4>
    </div>
    <div id="bola2" style="float: left;margin-top: 20px;">
      <img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva" style="float:left; display:inline-block"/>
    <hr style="height:3px;width:100px;border-width:0;color:#D29E1D;background-color:#D29E1D;float:left"></hr>
</div>

Here’s the FIDDLE of this case

Answer 3

I removed your inline CSS from HTML. Never do it again unless it’s an email signature. Anyway, that’s beside the point.

In the elements below I distributed by means of display:inline-block and used the property line-height with vertical-align:middle thus leaving the image centralized in the DIV and also the HR.

#bola {
  display: inline-block;
  width: 15%;
  font-size: 22px;
  font-weight: bolder;
}
#bola2 {
  display: inline-block;
  margin-left: 20px;
  width: 70%;
  line-height: 60px;
}
#bola2 img {
  vertical-align: middle;
}
hr {
  vertical-align: middle;
  margin-left: -7px;
  background-color: #D19D1C;
  height: 3px;
  border: none;
  width: 70%;
  display: inline-block;
}

<div id="bola" class="alinhar">
  <h4>Bibliotecas</h4>
</div>
<div id="bola2" class="alinhar">
  <img src="http://culturalis.pt/wp-content/uploads/2015/06/circun.png" alt="curva" />
  <hr></hr>
</div>