Align images and text within div

Asked

Viewed 608 times

0

I need to align some elements on a page and I’m not getting, I’ve done some tests how to use the text-align:center in class pull-right as well as in the header-features according to examples I read, but without success.

What I got is this:

 <!-- ALINHA CONTEÚDO -->
  <div class="row">
    <div class="col-md-12">
     <!-- CLASSE ONDE O CONTEÚDO ESTÁ -->
      <div class="pull-right">
        <ul class="header-features">
          <li><i class="fa fa-bullhorn"></i>
            <div class="header-feature-caption"> <img src="img/caixa.jpg" width="108"> </div>
          </li>
          <li><i class="fa fa-hand-o-right"></i>
            <div class="header-feature-caption">
              <h5 class="header-feature-title">ANUNCIAR IMÓVEIS</h5>
              <p class="header-feature-sub-title">clique aqui</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

And their CSS is these:

.pull-right {
  float: right !important;
}

.header-features {
  list-style: none;
  margin: 0;
  padding: 0;
}

What I’m trying to do is this: inserir a descrição da imagem aqui

The project can be seen here: Demo Page

html css

2 answers

0


For what I’ve seen you’re working with Bootstrap, do a test: delete the div from the pull-right and put the pull-right class in the UL tag and to ensure, in your col-Md-12 also add the class: text-right

And give me a call here if it worked!

  • If the site is in some online file, please pass the link, because I can try the changes and pass you something concrete, in case the above instructions do not work!

  • Hello @Gabriel Garcia, I just put online, I’m a little confused on this change, if you can help me thank you.

  • I had misunderstood, I thought I wanted to line up on the right, in case you in the center Neer?

  • That’s right @Gabriel Garcia, in the center, as in the image posted as example.

  • 1

    Thanks @Gabriel Garcia, got exactly as needed, great help.

0

Do the following:

<div class="col-md-12">

          <center>

            <ul class="header-features">
              <li><i class="fa fa-bullhorn"></i>
                <div class="header-feature-caption"> <a href="http://www1.caixa.gov.br/atendimento/canais_atendimento/correspondente_caixa_aqui.asp" target="_blank"><img src="img/correspondente-caixa.jpg" width="108"></a> </div>
              </li>
              <li><i class="fa fa-hand-o-right"></i>
                <div class="header-feature-caption">
                  <h5 class="header-feature-title">ANUNCIAR IMÓVEIS</h5>
                  <p class="header-feature-sub-title">clique aqui</p>
                </div>
              </li>
            </ul>
          </center>

</div>

At least I did it here in my browser and it worked.

Remove the pull-right class will not need it, and instead of her div put the <center>

Browser other questions tagged html css

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