Wyśroidkowanie diva w pionie css

Question

Witam otóż mam problem. 

html:

<div class="footer" id="footer">

            <div class="media" id="media">
                    <div class="facebook" style="width: 50px; height: 50px; border-radius: 50px; background-color: grey; text-align:center; margin: 10px;">
                        <a target="_blank" class="facebok" href="https://facebook.com/"><i style="line-height: 50px; color: white; font-size:20px" class="demo-icon icon-facebook-2"></i></a>
                    </div>
                    <div class="instagram" style="width: 50px; height: 50px; border-radius: 50px; background-color: grey; text-align:center; margin: 10px;">
                        <a target="_blank" class="instagramm" href="https://instagram.com/"><i style="line-height: 50px; color: white; font-size:20px" class="demo-icon icon-instagram"></i></a>
                    </div>
                    <div class="twitter" style="width: 50px; height: 50px; border-radius: 50px; background-color: grey; text-align:center; margin: 10px;">
                        <a target="_blank" class="twiter" href="https://twiter.com/"><i style="line-height: 50px; color: white; font-size: 15px" class="demo-icon icon-twitter"></i></a>
                    </div>
                    <div class="youtube" style="width: 50px; height: 50px; border-radius: 50px; background-color: grey; text-align:center; margin: 10px;">
                        <a target="_blank" class="yt" href="https://youtube.com/"><i style="line-height: 50px; color: white; font-size: 20px" class="demo-icon icon-youtube-play"></i></a>
                    </div>
                    <div class="github" style="width: 50px; height: 50px; border-radius: 50px; background-color: grey; text-align:center; margin: 10px;">
                        <a target="_blank" class="git" href="https://github.com/"> <i style="line-height: 50px; color: white; font-size: 20px" class="demo-icon icon-github"></i></a>
                    </div>
            </div>

css:

 .footer
      {
          width:100%;
          height:400px;
      }
.media
{
    float:right;
    align-items: center;
}
.twitter,facebook,instagram,itd
{
    text-decoration: none;
    display: inline-block;
    opacity: 1;
    transform: scale(1,1);
    transition-timing-function: ease-out;
    transition-duration: 250ms;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}
.twitter,facebook,instagram itd :hover
{
    opacity: .7;
    transform: scale(1.05,1.07);
    transition-timing-function: ease-out;
    transition-duration: 250ms;
    -webkit-transform: scale(1.05,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1.05,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;
}

powyżej znajduje się kod. tam gdzie poprzecnku napisalem klasyto chodziło mi o to iż takie same elementy są do każdej z klasy i dodałem ich aby nie zapychać kody. Wracając chce div media wyśrodkować w pionie w divie footer. Próbowałem:

- vertical-align;

-line-height;;

-align-item;

-margin: auto 0; - z desperacji

-transform

czy może mi ktoś pomóc rozgryźć co tu jest nie tak. Siedzę nad tym od godziny. Będę naprawdę wdzieczny

 

Answer 1

Aby wycentrować w pionie div .media w divie .footer  możemy skorzystać np. z flexboxa

.footer {
  width:100%;
  height:400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

 

Answer 2

https://www.youtube.com/watch?v=njdJeu95p6s

Answer 3

jeżeli chodzi o takie ułożenie

 

wystarczy dopisać kropki po przecinkach czyli zamiast

.twitter,facebook,instagram,itd

napisać

.twitter,.facebook,.instagram,itd

 

Answer 4

chodziło mi o to iż takie same elementy są do każdej z klasy i dodałem ich aby nie zapychać kody. 

Jeżeli już wspominasz o tym to ten zapis

<div class="facebook" style="width: 50px; height: 50px; border-radius: 50px; background-color: grey; text-align:center; margin: 10px;">

dodaj do css-a

.twitter, .facebook, .instagram, .youtube, .github
{
  width: 50px; 
  height: 50px; 
  border-radius: 50px; 
  background-color: grey; 
  text-align:center; 
  margin: 10px;
  text-decoration: none;
  display: inline-block;
  opacity: 1;
  transform: scale(1,1);
  transition-timing-function: ease-out;
  transition-duration: 250ms;
  -webkit-transform: scale(1,1);
  -webkit-transition-timing-function: ease-out;
  -webkit-transition-duration: 250ms;
  -moz-transform: scale(1,1);
  -moz-transition-timing-function: ease-out;
  -moz-transition-duration: 250ms;
}

i wtedy masz

<div class="facebook">
      . . .
</div>
<div class="instagram">
      . . .
</div>

itd.

 

propozycja

<div class="footer" id="footer">
  <div class="media" id="media">
    <div class="facebook">
      <a target="_blank" href="https://facebook.com/">
        <i class="demo-icon icon-facebook-2"></i>          
      </a>
    </div>
    <div class="instagram">
      <a target="_blank" href="https://instagram.com/">
        <i class="demo-icon icon-instagram"></i>          
      </a>
    </div>
    <div class="twitter">
      <a target="_blank" href="https://twiter.com/">
        <i class="demo-icon icon-twitter"></i>          
      </a>
    </div>
    <div class="youtube">
      <a target="_blank" href="https://youtube.com/">
        <i class="demo-icon icon-youtube-play"></i>          
      </a>
    </div>
    <div class="github">
      <a target="_blank" href="https://github.com/">
        <i class="demo-icon icon-github"></i>          
      </a>
    </div>
  </div>
</div>

<style>
  .footer
  {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .media
  {
    display: flex;
    flex-direction: row-reverse;
  }
  .media a i
  {
    line-height: 50px; 
    color: white; 
    font-size: 20px;  
  }
  
  /* gdy nie potrzebujesz ostylować, każdego po nazwie klasy z osobna wystarczy
  .media a
  {
    /* twój kod css */  
  }
  /* lub */
  .twitter a, .facebook a, .instagram a, .youtube a, .github a
  {
    /* twój kod css */
  }
  */
  
  .twitter, .facebook, .instagram, .youtube, .github
  {
    width: 50px; 
    height: 50px; 
    border-radius: 50px; 
    background-color: grey; 
    text-align: center; 
    margin: 10px;
    text-decoration: none;
    display: inline-block;
    opacity: 1;
    transform: scale(1,1);
    transition-timing-function: ease-out;
    transition-duration: 250ms;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
  }
  .twitter:hover, .facebook:hover, .instagram:hover, .youtube:hover, .github:hover
  {
    opacity: .7;
    transform: scale(1.05,1.07);
    transition-timing-function: ease-out;
    transition-duration: 250ms;
    -webkit-transform: scale(1.05,1.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1.05,1.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;
  }
</style>

 

Answer 5

Dziękuje za szybką odpowiedź dotyczącą mojego problemu. Chciałbym też podziękować osobom, które pomogły mi zrobić ten kod bardziej przejrzystym niż był. Zostawiam tyn temat na wszelki wypadek. Jeśli ktoś ma podobny problem lub ktoś ma ciekawsze rozwiązanie śmiało proszę pisać. Jeszcze raz dziękuje za pomoc i życzę miłego dnia lub nocy w zależności kiedy to czytacie.