Image with horizontal hr centered vertically in half

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

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

Follow 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>

IMAGE USE VERSION

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>

Good,

First you have to be careful about closing the tags.

One of the ways you have to align elements is by using 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>

I just closed the tags that were not closed here

I've added this CSS

#bola{
   float: left;
}

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

You have the FIDDLE where you can test

P.S. I used margin-top to center more or less #bola2 compared to #bola

ALTERNATIVE

If you do not want to use a CSS file to save styles, you can always add to HTML 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

I drew your HTML inline CSS. Never do this again unless it's an e-mail signature. Anyway, that's beside the point.

In the elements below I have distributed by display:inline-block and I have used the line-height property with vertical-align:middle thus leaving the image centered on 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>