Выравнивание DIV-блока

@marrk · Регистрация: 01.12.2013

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

Вопрос простой:

HTML5

1	<div align="center">текст</div>

всё нормально работает, но если сделать:

HTML5

1	<div class="center-block">текст</div>

и

CSS

1
2
3

.center-block{
align: center;
}

То редактор ругается, говорит свойства align не существует. Как правильно делать в этом случае?

@siyanie · 08.12.2015, 16:04

marrk, нужно сделать текст по центру внутри блока или разместить блок на середине страницы?

@marrk · 08.12.2015, 16:06 **[ТС]**

Содержимое по центру внутри блока форма или картинка, т.е. не совсем текст.
P.S. Хотя по самому блоку по центру тоже есть определённые вопросы т.к у меня margin:0 auto;
не работает почему-то на jsfidle

@aj17 · 08.12.2015, 16:11

CSS

1	.text-center{text-align: center;}

может так?

@siyanie · 08.12.2015, 16:24

marrk,

HTML5

1
2
3

<div class="center-block">
  <img src="http://zanogu.com/img/gentpls/tpl-m-34.jpg" alt="kotik" />
</div>

CSS

.center-block{
  max-width: 1000px;
}
 
img {
  margin: 0 auto;
  display: block;
}

Вот картинка по середине внутри блока, вставьте в песочницу все работает.

@marrk · 08.12.2015, 16:28 **[ТС]**

Т.е. мне для каждого тега внутри form или input прописывать margin: 0 auto; ?

@siyanie · 08.12.2015, 17:12

marrk,

HTML5

<div class="ppp">
  <form>
    <div class="form-item">
      <input type="text">
    </div>
    <div class="form-item">
      <input type="text">
    </div>
    <div class="form-item">
      <input type="text">
    </div>
  </form>
</div>

CSS

.form-item {
  margin: 6px 0;
}
 
form {
  width: 200px;
  margin: 0 auto;
}
 
.ppp {
  max-width: 600px;
  background: gray;
  height: 500px;
}

или

CSS

.form-item {
  margin: 6px 0;
  text-align: center;
}
 
.ppp {
  max-width: 600px;
  background: gray;
  height: 500px;
}

Но утверждать правильность моих вариантов на 100% не могу, сам учусь. Думаю люди поопытнее поправят

@marrk · 08.12.2015, 17:24 **[ТС]**

По-моему вы перемудрили и так было бы достаточно:

HTML5

<div class="ppp">
  <form>
    <div class="form-item">
      <input type="text"><br>
 
      <input type="text"><br>
 
      <input type="text"><br>
    </div>
  </form>
</div>

Добавлено через 9 минут
Возвращаясь к теме выравнивания, вот конкретный пример нашёл, как выровнять "детей" по центру внутри родителя http://jsfiddle.net/k0ffLw7h/

HTML5

<div id="main">
  <div class="child">текст</div>
  <div class="child">текст</div>
  <div class="child">текст</div>
</div>

CSS

1
2
3

.child{
  display: inline-block;
}

@Анар · 08.12.2015, 18:07

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

Возвращаясь к теме выравнивания, вот конкретный пример нашёл, как выровнять "детей" по центру внутри родителя http://jsfiddle.net/k0ffLw7h/

Это вопрос? Тогда так же, как вам и написали выше:

CSS

.child{
  display: inline-block;
  text-align:center;
}

@marrk · 08.12.2015, 18:09 **[ТС]**

Тогда так же, как вам и написали выше

Я попробовал этот способ на этом примере перед вопросом сюда, он не работает, блоки остаются выровнены по левому краю.

@siyanie · 08.12.2015, 18:13

marrk, Какие блоки? Речь шла об одном блоке. Конкретнее скажите что вам нужно.

@marrk · 08.12.2015, 18:15 **[ТС]**

siyanie исходный код http://jsfiddle.net/k0ffLw7h/ необходимо http://jsfiddle.net/fzzus33L/ можно ли это сделать на css и как?

@Karssen · 08.12.2015, 18:21

http://jsfiddle.net/fzzus33L/1/

@marrk · 08.12.2015, 18:22 **[ТС]**

А в main да понятно, не туда ставил...

@aj17 · 08.12.2015, 18:25

Добавьте тот класс который я вам приложил ul, и стили скопировать не забудьте

@siyanie · 08.12.2015, 18:28

marrk,

HTML5

<div id="main">
  <div class="wrapper">
    <div class="child">текст</div>
    <div class="child">текст</div>
    <div class="child">текст</div>
  </div>
</div>

CSS

.child{
  display: inline-block;
}
 
.wrapper {
  width: 300px;
  margin: 0 auto;
  background: gray;
  text-align: center;
}
 
#main {
  max-width: 1000px;
  background: lightblue;
  height: 300px;
}

@marrk 129 / 50 / 8 Регистрация: 01.12.2013 Сообщений: 572
	08.12.2015, 18:22 [ТС]	14
	А в main да понятно, не туда ставил... 0

Выравнивание DIV-блока

Решение

Решение

@siyanie 13 / 13 / 7 Регистрация: 21.11.2015 Сообщений: 85
	08.12.2015, 16:04	2
	marrk, нужно сделать текст по центру внутри блока или разместить блок на середине страницы? 0

@marrk 129 / 50 / 8 Регистрация: 01.12.2013 Сообщений: 572
	08.12.2015, 16:06 [ТС]	3
	Содержимое по центру внутри блока форма или картинка, т.е. не совсем текст. P.S. Хотя по самому блоку по центру тоже есть определённые вопросы т.к у меня margin:0 auto; не работает почему-то на jsfidle 0

@marrk 129 / 50 / 8 Регистрация: 01.12.2013 Сообщений: 572
	08.12.2015, 16:28 [ТС]	6
	Т.е. мне для каждого тега внутри form или input прописывать margin: 0 auto; ? 0

@marrk 129 / 50 / 8 Регистрация: 01.12.2013 Сообщений: 572
	08.12.2015, 18:09 [ТС]	10
	Тогда так же, как вам и написали выше Я попробовал этот способ на этом примере перед вопросом сюда, он не работает, блоки остаются выровнены по левому краю. 0

@siyanie 13 / 13 / 7 Регистрация: 21.11.2015 Сообщений: 85
	08.12.2015, 18:13	11
	marrk, Какие блоки? Речь шла об одном блоке. Конкретнее скажите что вам нужно. 0

@marrk 129 / 50 / 8 Регистрация: 01.12.2013 Сообщений: 572
	08.12.2015, 18:15 [ТС]	12
	siyanie исходный код http://jsfiddle.net/k0ffLw7h/ необходимо http://jsfiddle.net/fzzus33L/ можно ли это сделать на css и как? 0

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	08.12.2015, 18:21	13
	Сообщение было отмечено marrk как решение Решение http://jsfiddle.net/fzzus33L/1/ 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	08.12.2015, 18:25	15
	Добавьте тот класс который я вам приложил ul, и стили скопировать не забудьте 0