1
I need to align in 3 columns my image and text help me please follow my code they are in a list
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>they have to stay like this :
here is the image of my button as it looked in the browsers after the edits:
on Google Chrome:
On mozzarella:
on Safari:
and at the Opera:
Follow the button code:
<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;
}
friend ultilized his method and it worked well but just below my list goes a button that is in the center only that it gets straight google Hrome and opera already in mozila and safari not because it is aligned to the left of my list knows what happened
– Felipe Henrique
How is the code for that button? (html and css)
– Jefferson Alison
I’ll edit the post for you to see and put the image of how it looked in the browsers
– Felipe Henrique
Ready edited friend if he can understand how you can see in the image only in Hrome and in opera the boot was the right way
– Felipe Henrique
The button is inside the Section?
– Jefferson Alison
This gets inside of it just above the </Section tag>
– Felipe Henrique
Brother, pq put <button></button> inside the tag <a href=""></a>?
– Jefferson Alison
Vaccination and custom rsrsrs I have just removed however the situation has not changed at all
– Felipe Henrique
Ok, you will use the <a> or the <button> ?
– Jefferson Alison
I’ll use the button q it will redirect me to another page
– Felipe Henrique
I edited my answer, go to Jsfiddle
– Jefferson Alison
you and fuck face vlw even
– Felipe Henrique
Valew brother, luck in the projects!
– Jefferson Alison