Нужно что-то типа vertical-align:center

@Electroflower · Регистрация: 05.01.2012

Author24 — интернет-сервис помощи студентам

Привет всем! Только начинаю знакомиться с этой темой., поэтому прошу помощи.
Есть HTML:

HTML5

<div class="sidebar_contacts">  
    <center>
        <div class="all_contact_link">                      
            <br/>
            <div class="contacts_link"><a href="#">SKYPE</a></div>  
            <br/>
            <div class="contacts_link"><a href="#">INSTAGRAM</a></div>
            <br/>
            <div class="contacts_link"><a href="#">TELEGRAM</a></div>
            <br/>   
            <div class="contacts_link"><a href="#">VK</a></div>
        </div>
    </center>                                       
</div>

есть CSS:

CSS

.sidebar_contacts {
    font-family: 'Easy';
    text-align: center;
    text-transform: uppercase;
    font-size: 40px;
    color: #FFF;
}
 
.sidebar_contacts a {
    font-family: 'Easy';
    font-size: 40px;
    text-transform: uppercase;  
}
 
.sidebar_contacts a:link {
     color: #631A91;
     outline: none; 
}
 
.sidebar_contacts a: visited {
     color:#631A91 ;
     outline: none; 
}
 
.sidebar_contacts a:hover {
     color:#A16BDE ;
     outline: none; 
}
 
.sidebar_contacts a:active {
     color:#E4CCF5 ;
     outline: none; 
}
 
.contacts_link {
    padding-top: 15px;
    padding-bottom: 15px;
}
 
.contacts_link {
    padding: 3px;
    border-radius: 5px;
    border-style: none;
    width: 480px;
    vertical-align: center;
}
 
.contacts_link:hover {
    background-color: #F0FDFD;
    /*border: 1px solid #631A91;*/
}
 
/*
.contacts_link a {
    padding:15px;
    margin: 15px;
}
*/

Как выровнять ссылки класса contacts_link так чтобы при масштабировании браузера они всегда были посередине родителя?

@Academik · 03.09.2018, 16:56

Electroflower, так? https://jsfiddle.net/hsnr0v4a/

HTML5

<div class="sidebar_contacts">  
  <div class="all_contact_link">                      
    <div class="contacts_link"><a href="#">SKYPE</a></div>  
    <div class="contacts_link"><a href="#">INSTAGRAM</a></div>
    <div class="contacts_link"><a href="#">TELEGRAM</a></div> 
    <div class="contacts_link"><a href="#">VK</a></div>
  </div>                                     
</div>

CSS

.all_contact_link{
  display: flex;
  justify-content: center;
}
.sidebar_contacts {
    font-family: 'Easy';
    text-align: center;
    text-transform: uppercase;
    font-size: 40px;
    color: #FFF;
}
 
.sidebar_contacts a {
    font-family: 'Easy';
    font-size: 40px;
    text-transform: uppercase;  
}
 
.sidebar_contacts a:link {
     color: #631A91;
     outline: none; 
}
 
.sidebar_contacts a:visited {
     color:#631A91 ;
     outline: none; 
}
 
.sidebar_contacts a:hover {
     color:#A16BDE ;
     outline: none; 
}
 
.sidebar_contacts a:active {
     color:#E4CCF5 ;
     outline: none; 
}
 
.contacts_link {
    padding-top: 15px;
    padding-bottom: 15px;
}
 
.contacts_link {
    padding: 3px;
    border-radius: 5px;
    border-style: none;
    vertical-align: center;
}
 
.contacts_link:hover {
    background-color: #F0FDFD;
    /*border: 1px solid #631A91;*/
}
 
/*
.contacts_link a {
    padding:15px;
    margin: 15px;
}
*/

@Electroflower · 04.09.2018, 08:51 **[ТС]**

Mr Coder, наверно неправильно изложила проблему

В общем когда браузер свернут в окно вот такой вид:

А когда развернут вот такой:

Как сохранить пропорции при масштабировании, между ссылкой последней и футером при развертывании расстояние увеличивается? Это процентами как-то написано можно убрать..задавать в процентах вроде

@Kraken73 · 04.09.2018, 12:37

Electroflower, если правильно понял

CSS

.sidebar_contacts {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

и <br> удалите перед пунктом skype, чтобы выравнивание норм было

@Electroflower Shiningemerald 384 / 117 / 22 Регистрация: 05.01.2012 Сообщений: 951
	04.09.2018, 08:51 [ТС]	3
	Mr Coder, наверно неправильно изложила проблему В общем когда браузер свернут в окно вот такой вид: А когда развернут вот такой: Как сохранить пропорции при масштабировании, между ссылкой последней и футером при развертывании расстояние увеличивается? Это процентами как-то написано можно убрать..задавать в процентах вроде 0

	04.09.2018, 12:37