1

Preciso alinhar em 3 colunas as minhas imagem e textos me ajudem por favor segue o meu código eles estão em uma lista

ul li {
  list-style-type: none;
}
.corpo-1 h1 {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 2.8em;
  font-weight: bold;
  margin-top: 40%;
}
.corpo-1 p {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 1.2em;
  margin-top: -2%;
}
.linha-titulo {
  width: 30%;
  height: 1.9px;
  border: none;
  background: #000;
}
.tamanho {
  -webkit-transform: scale(0.6);
  -o-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
}
.info h1 {
  margin-top: -3%;
}
.info {
  text-align: center;
}
.info li {
  display: inline;
}
.info li img {}
<section class="corpo-1">
  <h1>Lorem ipsum dolor adipiscing<br />
            amet dolor consequat</h1>

  <p>Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non.
    <br/>Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.</p>

  <hr class="linha-titulo">
  <!-- <img src="images/logo-transp.png" /> -->
  <ul class="info">
    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png" alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>

    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png" alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>

    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png" alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>
  </ul>
</section>

eles tem que ficar assim :

inserir a descrição da imagem aqui

aqui esta as imagem do meu botão como ficou nos navegadores apos as edições:

no Google chrome:

inserir a descrição da imagem aqui

No mozila:

inserir a descrição da imagem aqui

no Safari:

inserir a descrição da imagem aqui

e no Opera:

inserir a descrição da imagem aqui

Segue o código do botão:

 <p class="text-center">    
      <a href="#">
         <button id="btn-info">leia mais ...</button>
     </a>
 </p>

#btn-info{
    border:3px solid #000;
    border-radius: 5px;
    width: 220px;
    height: 50px;
    text-align: center;
    font-family: Gabriola;
    font-size: 1.5em;
    color: #000;
    background: transparent;
    cursor: pointer;
    margin-top: 5%;
    clear: both;

}

#btn-info:hover{
    background: #000;
    color: #fff;
}

3 Respostas 3

1

Tente assim:

.info li {
  float: left;
  width: 33%;
}

Exemplo testado em todos navegadores

13
  • amigo ultilizei su metodo e deu certo porem logo abaixo da minha lista vai um botao que fica no centro so que ele fica certinhono google chrome e no opera ja no mozila e no safari nao porque ele fica alinhado a esquerda da minha lista sabe oque houve Commented 21/05/2015 às 11:35
  • Como esta o code desse botão? (html e css) Commented 21/05/2015 às 12:27
  • vou editar o post para vc ver e colocar as imagem de como ele ficou nos navegadores Commented 21/05/2015 às 12:28
  • Amigo pronto editei ve se consegue compreender como vc pode ver nas imagem somente no chrome e no opera o botao ficou do jeito certo Commented 21/05/2015 às 12:35
  • 1
    Ok, vc vai usar o <a> ou o <button> ? Commented 21/05/2015 às 12:51
1

Para ficarem lado a lado você pode definir:

ul li {
  list-style-type:none;
  float:left;
}

Ainda assim não teria um resultado como deseja, pois não estariam centralizadas, mas então basta definir uma largura para o seu ul e centralizar ele:

ul { 
  width:72%;
  margin:auto;
}

Pode não ser a "melhor prática", mas funciona! :D

0

ul{
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
 }
ul li {
  list-style-type: none;
}
.corpo-1 h1 {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 2.8em;
  font-weight: bold;
  margin-top: 40%;
}
.corpo-1 p {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 1.2em;
  margin-top: -2%;
}
.linha-titulo {
  width: 30%;
  height: 1.9px;
  border: none;
  background: #000;
}
.tamanho {
  -webkit-transform: scale(0.6);
  -o-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
}
.info h1 {
  margin-top: -3%;
}
.info {
  text-align: center;
}
.info li {
  display: inline;
}
.info li img {}
<section class="corpo-1">
  <h1>Lorem ipsum dolor adipiscing<br />
            amet dolor consequat</h1>

  <p>Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non.
    <br/>Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.</p>

  <hr class="linha-titulo">
  <!-- <img src="images/logo-transp.png" /> -->
  <ul class="info">
    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png" alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>

    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png" alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>

    <li>
      <img src="http://ic.pics.livejournal.com/menami_sama/32531158/565942/565942_original.png" alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>
  </ul>
</section>

1
  • Eu apenas disse que o UL deveria centrar os seus LI's. Faltava dizer display iria ter o UL. ul{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } Commented 31/03/2016 às 16:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .