Вот визитка. http://a0336861.xsph.ru/ Хочу что бы эти значки стояли ровно под текст, как это сделать? <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>YungUeio</title> <link href='https://fonts.googleapis.com/css?family=Raleway:200,400,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <video id="video" class="bg-video" loop autoplay autobuffer> <source src="timelapse.mp4" type="video/mp4"> </video> </div> <div id="large-header" class="large-header"> <canvas id="demo-canvas"></canvas> </div> <div class="text-wrapper"> <h1 class="main-title">YUNG <span class="thin">UEIO</span></h1> <p class="sub-title">Until the end of until death will achieve</p> <div class="socials"> </a> <a href="//telegram.me/negativementalattitude" target="_blank" class="icon telegram" id="telegram"> <svg preserveaspectratio="xMinYMin meet" viewbox="0 0 200 200" class="circle"> <circle cx="100" cy="100" r="50"/> </svg> <img src="img/telegram.svg"> </a> <a href="//instagram.com/yungueio" target="_blank" class="icon instagram" id="instagram"> <svg preserveaspectratio="xMinYMin meet" viewbox="0 0 200 200" class="circle"> <circle cx="100" cy="100" r="50"/> </svg> <img src="img/instagram-logo.svg"> </a> <a href="//vk.com/youngbezdar" target="_blank" class="icon vk" id="vk"> <svg preserveaspectratio="xMinYMin meet" viewbox="0 0 200 200" class="circle"> <circle cx="100" cy="100" r="50"/> </svg> <img src="img/vk.svg"> </a> </div> </div> <script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/EasePack.min.js'></script> <script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/rAF.js'></script> <script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/TweenLite.min.js'></script> <script type="text/javascript"> var red = 255; var green = 255; var blue = 255; document.getElementById("vk").addEventListener("mouseenter", function(e){ red = 69; green = 102; blue = 142; }, true); document.getElementById("instagram").addEventListener("mouseenter", function(e){ red = 193; green = 53; blue = 132; }, true); document.getElementById("telegram").addEventListener("mouseenter", function(e){ red = 0; green = 136; blue = 204; }, true); </script> <script src="js/index.js"></script> </body> </html> HTML <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>YungUeio</title> <link href='https://fonts.googleapis.com/css?family=Raleway:200,400,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="wrapper"> <video id="video" class="bg-video" loop autoplay autobuffer> <source src="timelapse.mp4" type="video/mp4"> </video> </div> <div id="large-header" class="large-header"> <canvas id="demo-canvas"></canvas> </div> <div class="text-wrapper"> <h1 class="main-title">YUNG <span class="thin">UEIO</span></h1> <p class="sub-title">Until the end of until death will achieve</p> <div class="socials"> </a> <a href="//telegram.me/negativementalattitude" target="_blank" class="icon telegram" id="telegram"> <svg preserveaspectratio="xMinYMin meet" viewbox="0 0 200 200" class="circle"> <circle cx="100" cy="100" r="50"/> </svg> <img src="img/telegram.svg"> </a> <a href="//instagram.com/yungueio" target="_blank" class="icon instagram" id="instagram"> <svg preserveaspectratio="xMinYMin meet" viewbox="0 0 200 200" class="circle"> <circle cx="100" cy="100" r="50"/> </svg> <img src="img/instagram-logo.svg"> </a> <a href="//vk.com/youngbezdar" target="_blank" class="icon vk" id="vk"> <svg preserveaspectratio="xMinYMin meet" viewbox="0 0 200 200" class="circle"> <circle cx="100" cy="100" r="50"/> </svg> <img src="img/vk.svg"> </a> </div> </div> <script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/EasePack.min.js'></script> <script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/rAF.js'></script> <script src='https://www.marcoguglie.it/Codepen/AnimatedHeaderBg/demo-1/js/TweenLite.min.js'></script> <script type="text/javascript"> var red = 255; var green = 255; var blue = 255; document.getElementById("vk").addEventListener("mouseenter", function(e){ red = 69; green = 102; blue = 142; }, true); document.getElementById("instagram").addEventListener("mouseenter", function(e){ red = 193; green = 53; blue = 132; }, true); document.getElementById("telegram").addEventListener("mouseenter", function(e){ red = 0; green = 136; blue = 204; }, true); </script> <script src="js/index.js"></script> </body> </html>
Хз, ну попробуй блоку social задать CSS стили: position: absolute; right: 50%; left: 50%; Код position: absolute; right: 50%; left: 50%;