How to align an image within an Alert Bootstrap component

Asked

Viewed 63 times

1

I need to align the image horizontally and vertically in the center of the Alert, but I’m not getting it. I tried to use a 100 padding (as an example) to demonstrate that the image moves... I would just like to line it up. How do I do this?

<div id="alert-dicas" role="alert" class="alert alert-warning alert-icon alert-dismissible">
    <button id="btn-close-dicas" aria-label="Close" class="close" type="button">
        <span aria-hidden="true">×</span>
    </button>
    <i class="icon fa-lightbulb-o" style="font-size:32px; padding:100px;" aria-hidden="true"></i>
    <h4>Dica</h4>
    <p>
        Logo abaixo, você visualizará algumas informações de conexão com o banco de dados. <br />
        Para garantir a segurança, nós armazenamos o seu arquivo de Bakup em nosso servidor, mas aconselhamos que você faça download e guarde-o em um local seguro para utilizá-lo quando for preciso.<br />
        Lembre-se sempre: Faça backups periódicos, pois se o sistema for atacado por vírus e outras ameaças, seus dados poderão ser perdidos e voce só poderá recuperá-los se tiver um backup recente!
    </p>
</div>

inserir a descrição da imagem aqui

If I remove the padding, it looks like this:

inserir a descrição da imagem aqui

html css

  • which version of bootstrap?

  • Bootstrap v3.3.7

  • You said you want it in the center, but in fact it is to stay where is the correct red square, centering only vertical?

  • Yeah. Vertically in the center.

  • I played a 100 padding for the image to move and go to the image position. If I remove the padding, the image is aligned in the upper corner pasted with the word Hint.

  • I updated the post... Disregard the padding... I think it will not be useful... Note the second image... This is how it looks... I would just like to lower it and align it vertically in the center and not leave it glued to the text. For this would need a horizontal center alignment.

Show 1 more comment

1 answer

1


Guy first you have to put position relative in the box to be able to place positon absolute in the icon and control things. After you give a padding-left in the box to push the text to the right giving space to the icon. After you give a top 50% and translateY(50%) in the icon so that it always aligns vertically. You don’t need padding in the icon no.

inserir a descrição da imagem aqui

Follow the image code above:

#alert-dicas {
  position: relative;
  box-sizing: border-box;
  padding-left: 40px;
}
.icon {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div id="alert-dicas" role="alert" class="alert alert-warning alert-icon alert-dismissible">
  <button id="btn-close-dicas" aria-label="Close" class="close" type="button">
      <span aria-hidden="true">×</span>
  </button>
  <i class="icon fa-lightbulb-o" aria-hidden="true"></i>
  <h4>Dica</h4>
  <p>
      Logo abaixo, você visualizará algumas informações de conexão com o banco de dados. <br />
      Para garantir a segurança, nós armazenamos o seu arquivo de Bakup em nosso servidor, mas aconselhamos que você faça download e guarde-o em um local seguro para utilizá-lo quando for preciso.<br />
      Lembre-se sempre: Faça backups periódicos, pois se o sistema for atacado por vírus e outras ameaças, seus dados poderão ser perdidos e voce só poderá recuperá-los se tiver um backup recente!
  </p>
</div>

  • 1

    Thanks @hugocsl! It worked 200%!

  • @Masterjr no problem my dear

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.