Форум PHP программистов > выравнивание текста

123456

26.08.2015 - 20:59

https://jsfiddle.net/3d82zhLb/2/

имеется фон определенного размера(в нашем случае он серый)
На нем есть шапка(#top), на шапке имеется 2 блока. Как выровнять текст по центру вертикали в этих блоках?

PS. В первом блоке текст должен быть с отступом от левого края в 10%, а во втором блоке - по центру

sergeiss

26.08.2015 - 23:57

Цитата (123456 @ 26.08.2015 - 20:59)

S. В первом блоке текст должен быть с отступом от левого края в 10%, а во втором блоке - по центру

1. Текст лучше обернуть в тэги, например span

<div id="page">
    <div id="top">
        <div id="p2"><span>Блок 2</span></div>
        <div id="p1"><span>Блок 1</span></div>
    </div>
</div>

2. Добавить CSS:

#p1 span {
padding-left: 10%;
}

#p2 {
....
text-align: center;
}

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

123456

27.08.2015 - 00:07

Цитата

text-align: center;

это мы выравниваем по горизонтали... А надо по вертикали

sergeiss

27.08.2015 - 00:46

Цитата (123456 @ 27.08.2015 - 00:07)

А надо по вертикали

"Дерьмо-вопрос" (с) ;)

<div id="page">
    <div id="top">
        <div id="p2"><span>Блок 2</span></div>
        <div id="p1"><span>Блок 1</span></div>
    </div>
</div>

#p2 {
...
display: table;
}

#p2 span {
display: table-cell;
vertical-align: middle;
}

#p1 span {
position: absolute;
top: 10%;
}

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

123456

27.08.2015 - 00:55

Вроде все гуд, но надо еще в первом блоке сделать сдвиг от левого края на 10%

https://jsfiddle.net/3d82zhLb/3/

sergeiss

27.08.2015 - 00:57

Цитата (123456 @ 27.08.2015 - 00:55)

но надо еще в первом блоке сделать сдвиг от левого края на 10%

Ну так добавь к стилю нужный сдвиг...

#p1 span {
position: absolute;
top: 10%;
left: 10%
}

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

123456

27.08.2015 - 01:03

прописал так:


#p1 {
display: table;
}

#p1 span {
position: absolute;
left: 10%;
display: table-cell;
vertical-align: middle;
}

Без position: absolute; выравнивается по вертикали, но не делается сдвиг.
а с position: absolute; наоборот, делается сдвиг, но не делается выравнивание по вертикали

sergeiss

27.08.2015 - 01:09

Цитата (123456 @ 27.08.2015 - 01:03)

#p1 {
display: table;
}

Вот это лишнее!!! Под твои требования это нужно только для #p2

PS. Да и вообще ты сделал безобразную смесь из того, что я тебе написал. Напиши ИМЕННО ТАК, как я написал. Ничего не добавляй "от себя".

Вот это - бардак полный:

Цитата (123456 @ 27.08.2015 - 01:03)

#p1 span {
position: absolute;
left: 10%;
display: table-cell;
vertical-align: middle;
}

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

123456

27.08.2015 - 01:18

Цитата (sergeiss @ 26.08.2015 - 20:57)

Цитата (123456 @ 27.08.2015 - 00:55)

но надо еще в первом блоке сделать сдвиг от левого края на 10%

Ну так добавь к стилю нужный сдвиг...

#p1 span {
position: absolute;
top: 10%;
left: 10%
}

Мы делаем отступ от верха и слева!
А нам нужен отступ только слева.

Но такой код не выравнивает по вертикали

https://jsfiddle.net/3d82zhLb/7/

sergeiss

27.08.2015 - 01:42

Цитата (123456 @ 26.08.2015 - 20:59)

В первом блоке текст должен быть с отступом от левого края в 10%, а во втором блоке - по центру

Тебе это надо??? Ну так я тебе и дал данные, как во втором сделать по центру, а первый с отступом слева на 10%.

И еще. У тебя в CSS есть 2 блока; оставь один из них и в нем пропиши только то, что тебе нужно:

#p1 span {
position: absolute;
top: 10%;
left: 10%
}

#p1 span {
position: absolute;
top: 10%;
}

Цитата (123456 @ 27.08.2015 - 01:18)

Мы делаем отступ от верха и слева!

Убери тот блок (из показанных чуть выше), где есть 'top:'

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

123456

27.08.2015 - 10:00

Все сделал как ты написал.
отступ есть, но вот не выравнивается по вертикали.

Если не сложно - поправь.

https://jsfiddle.net/3d82zhLb/9/

sergeiss

28.08.2015 - 00:14

Ну ежели чтобы везде было выравнивание по центру по высоте...

То

вот так, например

#p1 {
display: table;
}

#p2 {
text-align: center;
display: table;
}

#p2 span {
display: table-cell;
vertical-align: middle;
}

#p1 > span {
    display:table-cell;
    vertical-align: middle;
}

#p1 span span {
    margin-left: 10%;    
}

#page {
    width: 550px;
    height: 900px;
    background-color: gray;
    display: block;
    position: absolute;
    margin: auto;
}

#top {
	position: relative;
	background: url(http://poshouse.ru/wp-content/uploads/2012/06/интерьер-маленькой-квартиры1.jpg);
	margin: 5% 7% 0;
	height: 14%;
    width: 80%;
    border: 2px solid black;
}

#p1 {
	position: absolute;
    background: url(http://copypast.ru/uploads/posts/1206046304_image00001.jpg) no-repeat;
	background-size: 100%;
	height: 60%;
	width: 30%;
	margin: 8% 0 0 10%;
    border: 2px solid green;
    color:white;
     font-weight: bold;
}

#p2 {
	position: absolute;
    background: url(http://www.newsmarket.com.ua/wp-content/uploads/2011/02/Gorila.jpg) no-repeat;
	background-size: 100%;
	height: 60%;
	width: 30%;
	margin: 4% 0 0 50%;
    border: 2px solid red;
    color:red;
     font-weight: bold;
}

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)