Выравнивание по центру

@kirill1059 · Регистрация: 16.04.2013

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

Добрый день
Подскажите пожалуйста, в самом низу с левой стороны есть кнопки соц сетей, как их разместить по центру?
http://testhtml.besaba.com/
маргин-топ и падинг-топ не помогают.
Спасибо

@killlfun · 30.08.2014, 18:26

kirill1059, поместите их в отдельный блок и дайте ему правило margin:auto;
А каждому блоку с кнопкой дайте правило display:inline-block;

@kirill1059 · 30.08.2014, 18:45 **[ТС]**

killlfun, хм, спасибо
а как их разместить в одну строку?

@cybersoft · 30.08.2014, 19:10

Сообщение от kirill1059

а как их разместить в одну строку?

как бы глупо не смотрелось но могу предложить такой вариант, но это приведет к нарушении HTML5 к структуре кода.

HTML5

1	<center>Социальные сети</center>

Добавлено через 20 минут
kirill1059, выложите код html и css тут http://jsfiddle.net/

@kirill1059 · 30.08.2014, 19:19 **[ТС]**

cybersoft, http://jsfiddle.net/40sjgf6g/

HTML5

<!DOCTYPE html>
<html>
 <head>
   <title>Тест</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <link type="text/css" rel="stylesheet" href="style.css">
   <style>
   </style>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
   <script src="js/jquery.scrollTo.js" type="text/javascript"></script>
   <script src="js/main.js" type="text/javascript"></script>
  </head>
<body>
 
<div class="first_bg">
<div class="header">
<div id="logo"><p><img src="image/logo.png"></p></div>
 
<div id="log_in">
 <form action>
 <button>LOG IN</button>
 </form>
 </div>
</div>
<div class="text">iParty - Unique service to search for parties</div>
 
<div id="aboutus">
<form action>
<a href="#aboutus"><button>About Us</button></a>
</form>
</div>
 
</div>
 
<div class="second_bg">
<div class="about">iParty - Unique service to search for parties.</br>
                   &copy; iParty</div>
 
<div class="tw"></div>
<div class="vk"></div>
<div class="fb"></div>
<p><a id="foo"></a></p>
 
</div>
 
</body>
</html>

CSS

body, html {
    height: 100%;
}
 
button {
  color: white;
}
 
.header {
  background: black;
  position: fixed;
  width: 100%;
  height: 75px;
  margin: auto;
  background:rgba(0,0,0,0.5);
}
 
#logo {
  position: fixed;
  margin-top: 16px;
  margin-left: 30px;
}
 
#log_in form {
  text-align: right;
  margin-top: 20px;
  margin-right: 30px;
}
 
#log_in form button {
  background: transparent url(image/buttom1.png) no-repeat;
  width: 67px;
  height: 32px;
  border: 1px solid white;
  cursor: pointer;
}
 
#log_in form button:hover {
  background: #FFFFFF;
  color: black;
}
 
.text {
  text-align: center;
  padding-top: 400px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 45px;
  color: white;
}
 
#aboutus {
  text-align: center;
  padding-top: 50px;
}
 
#aboutus form button {
  background: #419ADE url(image/Follow_us.png) no-repeat;
  width: 250px;
  height: 50px;
  border: 1px solid #42a5de;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 15px;
  cursor: pointer;
}
 
#aboutus form button:hover {
  background: #4095DE;
  border: 1px solid #4095DE;
}
 
.first_bg{
    background: url(image/img1.jpg);
    background-size: cover;
    height: 100%;
}
.second_bg{
    background: #E8E8E8;
    height: 200px;
}
 
.about {
  text-align: center;
  padding-top: 15px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 15px;
  color: #A8A8A8;
  }
 
 
.tw {
    background: url(image/twitter.png) no-repeat;
    width: 29px;
    height: 24px;
    cursor: pointer;
 
  }
 
.tw:hover {
  background: url(image/twitter2.png) no-repeat;
  width: 29px;
  height: 24px;
}
 
.vk {
  background: url(image/vk.png) no-repeat;
  width: 29px;
  height: 24px;
  cursor: pointer;
}
 
.vk:hover {
  background: url(image/vk2.png) no-repeat;
  width: 29px;
  height: 24px;
}
 
.fb {
  background: url(image/facebook.png) no-repeat;
  width: 29px;
  height: 24px;
  cursor: pointer;
}
 
.fb:hover {
  background: url(image/facebook2.png) no-repeat;
  width: 29px;
  height: 24px;
}
 
*{
    margin:0;
    padding:0;
}

Комментарий администратора

Правила форума пункт 5.19
Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Ссылка на песочницу - это бонус.

@killlfun · 30.08.2014, 19:33

kirill1059, мой предыдущий пост и выравнивал и размещал их в одну линию.

@kirill1059 · 30.08.2014, 19:40 **[ТС]**

killlfun, всё всё всё)
спасибо)

@kirill1059 14 / 14 / 3 Регистрация: 16.04.2013 Сообщений: 404
		1
	Выравнивание по центру 30.08.2014, 18:18. Показов 2119. Ответов 6 Метки нет (Все метки) Добрый день Подскажите пожалуйста, в самом низу с левой стороны есть кнопки соц сетей, как их разместить по центру? http://testhtml.besaba.com/ маргин-топ и падинг-топ не помогают. Спасибо 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	30.08.2014, 18:26	2
	kirill1059, поместите их в отдельный блок и дайте ему правило margin:auto; А каждому блоку с кнопкой дайте правило display:inline-block; 2

@kirill1059 14 / 14 / 3 Регистрация: 16.04.2013 Сообщений: 404
	30.08.2014, 18:45 [ТС]	3
	killlfun, хм, спасибо а как их разместить в одну строку? 0

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	30.08.2014, 19:33	6
	Сообщение было отмечено kirill1059 как решение Решение kirill1059, мой предыдущий пост и выравнивал и размещал их в одну линию. 1

@kirill1059 14 / 14 / 3 Регистрация: 16.04.2013 Сообщений: 404
	30.08.2014, 19:40 [ТС]	7
	killlfun, всё всё всё) спасибо) 0

Выравнивание по центру

Решение