Posizionare elemento al centro HTML e CSS

di il
1 risposte

Posizionare elemento al centro HTML e CSS

Ciao a tutti, devo realizzare un sito di una società ma non riesco a mettere le foto dei titolari al centro dello schermo. Sono due foto in verticale con una scritta sotto e me le mette tutte a sinistra. Se lo forzo nel css con "left: 180px" ovviamente va bene solamente sul mio schermo e non su tutti. Mi potete dare una mano per favore? Vi posto il pezzo css e html di riferimento.
Credo che il problema sia il fatto che le immagini sono all'interno della section, ma non riesco a risolvere
Grazie mille!!


<!-- About Section -->
<section class="page-section" id="about">
<div class="container relative">

<h2 class="section-title font-alt align-left mb-70 mb-sm-40">
Chi siamo
</h2>

<div class="section-text mb-50 mb-sm-20">
<div class="row">

<div class="col-md-4">
<blockquote>
<p>
Se un’idea è più moderna di un’altra, è segno che non sono immortali né l’una né l’altra.
</p>
<footer>
Carlo Emilio Gadda
</footer>
</blockquote>
</div>



<p>
........

</p>



</div>
</div>



<!-- End About Section -->

<div class="row">


<!-- Team item -->
<div class="col-sm-4 mb-xs-30 wow fadeInUp">
<div class="team-item">

<div class="team-item-image">

<img src="images/sandro1.jpg" alt="" />

<div class="team-item-detail">

<h4 class="font-alt normal">Hello & Welcome!</h4>

<p>
Perito elettrotecnico
</p>


</div>
</div>

<!-- Team item -->
<div class="team-item-descr font-alt">

<div class="team-item-name">
Sandro
</div>

<div class="team-item-role">
Titolare
</div>

</div>

</div>
</div>
<!-- End Team item -->

<div class="col-sm-4 mb-xs-30 wow fadeInUp" data-wow-delay="0.1s">
<div class="team-item">

<div class="team-item-image">

<img src="images/marco1.jpg" alt="" />

<div class="team-item-detail">

<h4 class="font-alt normal">Nice to meet!</h4>

<p>
Perito elettronico
</p>



</div>
</div>
<!-- End Team item -->




<div class="team-item-descr font-alt">

<div class="team-item-name">
Marco
</div>

<div class="team-item-role">
Titolare
</div>

</div>

</div>
</div>
<!-- End Team item -->


</div>


</div>
</section>


------------------- CSS

/* ==============================
Team
============================== */

.team-grid{

}
.team-item{


}
.team-item-image{
position: relative;
overflow: hidden;


}
.team-item-image img{
width: 100%;
}
.team-item-image:after{
content: " ";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: transparent;

z-index: 1;

-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.team-item-detail{
opacity: 0;
width: 100%;
position: absolute;
top: 50%;
left: 0;
padding: 20px 23px 55px;
font-size: 14px;
font-weight: 300;
color: #777;
text-align: center;
z-index: 2;

-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.team-item-descr{
color: #777;
text-align:center;
-webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
-ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.team-item-name {
margin-top: 23px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 0.4em;
}
.team-item-role{
margin-top: 4px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.4em;
color: #aaa;
}




.page-section,
.small-section{
width: 100%;
display: block;
position: relative;
overflow: hidden;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

padding: 140px 0;
}
.small-section{
padding: 70px 0;
}

1 Risposte

Devi accedere o registrarti per scrivere nel forum
1 risposte