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

@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, всё всё всё)
спасибо)

Новые блоги и статьи
Реализация передвижения персонажа в Unity3d на C# InfoMaster 10.01.2025 Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .	Docker: руководство для начинающих InfoMaster 10.01.2025 В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .	Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .
Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .	Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .

@kirill1059 14 / 14 / 3 Регистрация: 16.04.2013 Сообщений: 404
		1
	Выравнивание по центру 30.08.2014, 18:18. Показов 2171. Ответов 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

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

Решение