Skip to main content
removeu 50 caracteres do conteúdo
Fonte Link
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104

Eu tirei seu CSS inline do HTML. Nunca mais faça isso a não ser que seja assinatura de e-mail. Enfim, não vem ao caso.

Nos elementos abaixo distribuí por meio de display:inline-block e usei a propriedade line-height com vertical-align:middle deixando assim a imagem centralizada na DIV e também o 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>

<!-- begin snippet: js hide: false -->

Eu tirei seu CSS inline do HTML. Nunca mais faça isso a não ser que seja assinatura de e-mail. Enfim, não vem ao caso.

Nos elementos abaixo distribuí por meio de display:inline-block e usei a propriedade line-height com vertical-align:middle deixando assim a imagem centralizada na DIV e também o 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>

<!-- begin snippet: js hide: false -->

Eu tirei seu CSS inline do HTML. Nunca mais faça isso a não ser que seja assinatura de e-mail. Enfim, não vem ao caso.

Nos elementos abaixo distribuí por meio de display:inline-block e usei a propriedade line-height com vertical-align:middle deixando assim a imagem centralizada na DIV e também o 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>

removeu 24 caracteres do conteúdo
Fonte Link
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104

Eu tirei seu CSS inline do HTML. Nunca mais faça isso a não ser que seja assinatura de e-mail. Enfim, não vem ao caso.

Nos elementos abaixo distribuí por meio de display:inline-block e usei a propriedade line-height com vertical-align:middle deixando assim a imagem centralizada na DIV e também o 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>

<!-- begin snippet: js hide: false -->

  

HTML

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

<!-- begin snippet: js hide: false -->

 

Eu tirei seu CSS inline do HTML. Nunca mais faça isso a não ser que seja assinatura de e-mail. Enfim, não vem ao caso.

Nos elementos abaixo distribuí por meio de display:inline-block e usei a propriedade line-height com vertical-align:middle deixando assim a imagem centralizada na DIV e também o 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>

<!-- begin snippet: js hide: false -->

 
adicionou 162 caracteres ao conteúdo
Fonte Link
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104

HTML

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

CSS

#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;
}
  
#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>

<!-- begin snippet: js hide: false -->
 

HTML

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

CSS

#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;
}
  

HTML

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

<!-- begin snippet: js hide: false -->
 

Fonte Link
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104
Carregando