1. дома
  2. Вопрос и ответ
  3. Как выровнять эти изображения по вертикали?

Как выровнять эти изображения по вертикали?

2016-11-25 3 views
0

Я создаю нижний колонтитул, и я хотел бы выравнивать изображения социальных сетей по вертикали и автоматически. По мере увеличения размера источника контактов изображения увеличиваются. И я не знаю, как действовать дальше.Как выровнять эти изображения по вертикали?

Мой код на jsfiddle: Demo Code

HTML

<!DOCTYPE html> 
<title>Teste</title> 

<body> 
    <footer class="footer"> 
    <div class="content"> 
     <div class="footer-right"> 
     <p><b>(43)3333-3333</b></p> 
     <p>[email protected]</p> 
     </div> 
     <div class="footer-left"> 
     <ul> 
      <li> 
      <a href="#"><img src="http://imgur.com/RVvPQt9.png" alt="Twitter"></a> 
      </li> 
      <li> 
      <a href="#"><img src="http://imgur.com/LsqUBIh.png" alt="Facebook"></a> 
      </li> 
      <li> 
      <a href="#"><img src="http://imgur.com/8PhKmDe.png" alt="Instagram"></a> 
      </li> 
      <li> 
      <a href="#"><img src="http://imgur.com/hDSPEMm.png" alt="Linkedin"></a> 
      </li> 
     </ul> 
     </div> 
    </div> 
    </footer> 
</body>

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-family: 'Source Sans Pro', sans-serif; 
} 

.content { 
    margin: 0 auto; 
    max-width: 1100px; 
    padding: 0 4% 0 4%; 
} 

li { 
    list-style: none; 
} 

.footer { 
    background-color: rgba(158, 158, 158, 0.42); 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 
    box-sizing: border-box; 
    width: 100%; 
    text-align: left; 
    padding: 15px 0; 
    overflow: hidden; 
} 

.footer .footer-right { 
    float: right; 
} 

.footer .footer-right { 
    font-size: 18px; 
    text-align: right; 
} 

.footer .content .footer-left { 
    float: left; 
} 

.footer .content .footer-left > ul > li { 
    display: inline-block; 
} 

.footer > .content > .footer-left > ul > li > a { 
    display: block; 
} 

.footer > .content > .footer-left > ul > li > a > img { 
    height: 30px; 
    width: 30px; 
} 


/*MEDIA QUERIES*/ 

@media screen and (max-width: 400px) { 
    .footer > .content > .footer-right, 
    .footer-left { 
    float: none !important; 
    text-align: center; 
    } 
    .footer > .content > .footer-right { 
    margin-bottom: 10px; 
    } 
}

источник

2016-11-25 J. Marco

+0

Точно, я хочу выровнять значки по вертикали –

+0

в моем решении, я добавил больше к «источнику контактов», поэтому мне нужно было бы что-то выровнять по вертикали. – WEBjuju

+0

Как и ожидалось, очень хорошая работа. –

ответ

0

Использование дисплея таблицы CSS - таблица-клеток приводит к тому, плавающая на работу и table-header-group и table-footer-group вызывают переупорядочение.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
} 
 

 
.content { 
 
    margin: 0 auto; 
 
    max-width: 1100px; 
 
    padding: 0 4% 0 4%; 
 
    min-width:92%; 
 
    display:table; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
.footer { 
 
    background-color: rgba(158, 158, 158, 0.42); 
 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    text-align: left; 
 
    padding: 15px 0; 
 
    overflow: hidden; 
 
} 
 

 
.footer .footer-right { 
 
    display:table-cell; 
 
    width:50%; 
 
} 
 

 
.footer .footer-right { 
 
    font-size: 18px; 
 
    text-align: right; 
 
    width:50%; 
 
} 
 

 
.footer .content .footer-left { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
} 
 

 
.footer .content .footer-left > ul > li { 
 
    display: inline-block; 
 
} 
 

 
.footer > .content > .footer-left > ul > li > a { 
 
    display: block; 
 
} 
 

 
.footer > .content > .footer-left > ul > li > a > img { 
 
    height: 30px; 
 
    width: 30px; 
 
} 
 

 

 
/*MEDIA QUERIES*/ 
 

 
@media screen and (max-width: 400px) { 
 
    .footer > .content > .footer-left { 
 
     display:table-footer-group; 
 
     width:100%; 
 
     float:none; 
 
     text-align: center; 
 
    } 
 
    .footer > .content > .footer-right { 
 
     display:table-header-group; 
 
     margin-bottom: 10px; 
 
     float:none; 
 
     width:100%; 
 
    } 
 
    .footer > .content > .footer-right p { 
 
     width:100%; 
 
     display:block; 
 
     text-align: center; 
 
    } 
 
}
<!DOCTYPE html> 
 
    <title>Teste</title> 
 
<body> 
 
    <footer class="footer"> 
 
     <div class="content"> 
 
      <div class="footer-left"> 
 
       <ul> 
 
        <li> 
 
         <a href="#"><img src="http://imgur.com/RVvPQt9.png" 
 
           alt="Twitter"></a> 
 
        </li> 
 
        <li> 
 
         <a href="#"><img src="http://imgur.com/LsqUBIh.png" 
 
           alt="Facebook"></a> 
 
        </li> 
 
        <li> 
 
         <a href="#"><img src="http://imgur.com/8PhKmDe.png" 
 
           alt="Instagram"></a> 
 
        </li> 
 
        <li> 
 
         <a href="#"><img src="http://imgur.com/hDSPEMm.png" 
 
           alt="Linkedin"></a> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <div class="footer-right"> 
 
       <p><b>(43)3333-3333</b></p> 
 
       <p>[email protected]</p> 
 
       <p><b>(43)3333-3333</b></p> 
 
       <p>[email protected]</p> 
 
      </div> 
 
     </div> 
 
    </footer> 
 
</body>

источник

2016-11-25 02:27:43 WEBjuju

+0

Отлично, это то, что мне нужно, хорошая работа, мой друг, и извините за английский переводчик;) –

+0

jsfiddle - это просто язык, на котором каждый может говорить, я считаю;) я не боролся с вопросом. – WEBjuju

0

Пожалуйста, попробуйте этот код Вот простой способ для Align вертикального

Если вы хотите добавить вертикальную среднюю коробку вы можете использовать ниже стиля для родительского дел.

"display:table;"

и добавить ниже недвижимости для ребенка

"display:table-cell"

CSS

* { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-family: 'Source Sans Pro', sans-serif; 
} 

.content { 
    margin: 0 auto; 
    max-width: 1100px; 
    width: 100%; 
    padding: 0 4% 0 4%; 
    display: table; 
} 

li { 
    list-style: none; 
} 

.footer { 
    background-color: rgba(158, 158, 158, 0.42); 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); 
    box-sizing: border-box; 
    width: 100%; 
    text-align: left; 
    padding: 15px 0; 
    overflow: hidden; 
} 

.footer .footer-right { 
    float: none; 
    vertical-align: middle; 
    text-align: right; 
    display: table-cell; 
} 

.footer .footer-right { 
    font-size: 18px; 
    text-align: right; 
} 

.footer .content .footer-left { 
    display: table-cell; 
    float: none; 
    vertical-align: middle; 
    text-align:left; 
} 

.footer .content .footer-left > ul > li { 
    display: inline-block; 
} 

.footer > .content > .footer-left > ul > li > a { 
    display: block; 
} 

.footer > .content > .footer-left > ul > li > a > img { 
    height: 30px; 
    width: 30px; 
} 


/*MEDIA QUERIES*/ 

@media screen and (max-width: 400px) { 
    .footer > .content > .footer-right, .footer-left { 
     float: none !important; 
     text-align: center; 
    } 
    .footer > .content > .footer-right { 
     margin-bottom: 10px; 
    } 
}

HTML

<!DOCTYPE html> 
    <title>Teste</title> 
<body> 
    <footer class="footer"> 
     <div class="content"> 

      <div class="footer-left"> 
       <ul> 
        <li> 
         <a href="#"><img src="http://imgur.com/RVvPQt9.png" 
           alt="Twitter"></a> 
        </li> 
        <li> 
         <a href="#"><img src="http://imgur.com/LsqUBIh.png" 
           alt="Facebook"></a> 
        </li> 
        <li> 
         <a href="#"><img src="http://imgur.com/8PhKmDe.png" 
           alt="Instagram"></a> 
        </li> 
        <li> 
         <a href="#"><img src="http://imgur.com/hDSPEMm.png" 
           alt="Linkedin"></a> 
        </li> 
       </ul> 
      </div> 

      <div class="footer-right"> 
       <p><b>(43)3333-3333</b></p> 

       <p><b>(43)3333-3333</b></p> 
       <p>[email protected]</p> 
      </div> 
     </div> 
    </footer> 
</body>

JSFIDDLE

источник

2016-11-25 06:47:35

Последний вопрос

 Смежные вопросы

  • Нет связанных вопросов^_^