Проблема с выравниванием по вертикали в css

[pudge]

2 элемента в одном диве должны быть расположены на одном уровне по горизонтали.

 

Высота этого дива 50пкс,высота текста(span)50пкс,высота картинки справа от текста тоже 50.

 

С картинкой то все ок,но вот текст не в центре по вертикали,а внизу,просто лежит и я не знаю как сделать что бы закрепить его в центре.

 

Пробовал   line-height:50px; на всех елементах,пробовал   margin:auto 0px auto 20px; тоже не помогает...

[wwt]

http://jsfiddle.net/HGe6N/

[pudge]

http://jsfiddle.net/HGe6N/

 

оооо,спасибо что напомнили про эту функцию!

А как выровнять картинку в этом блоке по горизонтали(только картинку)?я попробовал horisiontal-align:middle/center и не работает...

[mrnobody]

Так такого свойства не существует.

Используйте http://htmlbook.ru/css/text-align

[Z1gnet]

проблема данного способа в том что если текст будет в 2 строки получится ой как не красиво. ну если такого не привидится то можно не париться.

[pudge]

Так такого свойства не существует.

Используйте http://htmlbook.ru/css/text-align

 

 

это работает только на текст,на картинку у меня не работает 

[pudge]

блок в котором расположены текст и картинка:

.block{   display:block;   position:relative;   box-sizing: border-box;   width:600px;   height:50px;}

Дальше идет текст:

.text{   display:inline-block;   position:relative;   box-sizing: border-box;   text-align:left;   height:50px;   color:#ffb337;   text-shadow: 0px 0px 5px #c1371d;   vertical-align:middle;   margin:0px 0px 0px 20px;}

Ну и после текста картинка которая должна быть в центре блока:

.image{   display:inline-block;   position:relative;   box-sizing: border-box;   height:50px;   width:50px;   text-align:center;}

Да,можно text-align:center; указать в блоке,но тогда и текст и картинка будут в центре,а мне нужно что бы в центре была лишь картинка,а текст был слева...

Edited December 3, 2013 by pudge

[pudge]

В общем сделал так:

 

в стиле блока поставил text-align:center; 

position текста сделал absolute

margin текста задал:0px 0px 0px -260px;

 

а некрасиво,но другого(нормального)выхода не вижу..

[swandev]

В общем сделал так:

 

в стиле блока поставил text-align:center; 

position текста сделал absolute

margin текста задал:0px 0px 0px -260px;

 

а некрасиво,но другого(нормального)выхода не вижу..

Зачем абсолют и маргины? Может так? http://jsbin.com/aNEGegUX/2/edit

[pudge]

 

В общем сделал так:

 

в стиле блока поставил text-align:center; 

position текста сделал absolute

margin текста задал:0px 0px 0px -260px;

 

а некрасиво,но другого(нормального)выхода не вижу..

Зачем абсолют и маргины? Может так? http://jsbin.com/aNEGegUX/2/edit

 

 

 

а вот и нифига

 

 

.text {

text-align: left; /*возвращаем выравнивание слева*/

}

 

никому ничего не возвращает,и даже в примере по вашей ссылке у вас неправильный результат,картинка не в центре

[swandev]

 

 

В общем сделал так:

 

в стиле блока поставил text-align:center; 

position текста сделал absolute

margin текста задал:0px 0px 0px -260px;

 

а некрасиво,но другого(нормального)выхода не вижу..

Зачем абсолют и маргины? Может так? http://jsbin.com/aNEGegUX/2/edit

 

 

 

а вот и нифига

 

 

.text {

text-align: left; /*возвращаем выравнивание слева*/

}

 

никому ничего не возвращает,и даже в примере по вашей ссылке у вас неправильный результат,картинка не в центре

 

 

В центре она http://jsbin.com/aNEGegUX/3/edit

[pudge]

В центре она http://jsbin.com/aNEGegUX/3/edit

 

 

 

это даже приблезительно не центр

 

В центре она http://jsbin.com/aNEGegUX/3/edit

 

 

это даже приблезительно не центр

 

 

 

а все понял,открыл на всю,вижу что картинка в центре,но опять таки,вы неправильно сделали,я говорил какая высота блока?верно - 50,а у вас 70,а мне нужно именно 50,что бы высота блока была точно такой же как высота картинки,поставьте 70,посмотрите на эту каку,видите?нужно выровнять,а что бы выровнять нужно добавить в стили картинки и текста   display:inline-block; но вот тогда вы и поймете что ваш text-align: left; /*возвращаем выравнивание слева* не работает.

[swandev]

 

 

 

Если бы вы предоставили рабочий код, тогда проблем не было бы.

 

http://jsbin.com/aNEGegUX/4/edit

Edited December 3, 2013 by ALEEX SWN

[pudge]

 

 

 

http://jsbin.com/aNEGegUX/4/edit

 

 

Этот вариант аналогичен моему(где margin -260,position:absolute и т.д.)В общем ладно,хоть так оно у меня работает,закрыли тему

[swandev]

 

 

 

 

http://jsbin.com/aNEGegUX/4/edit

 

 

Этот вариант аналогичен моему(где margin -260,position:absolute и т.д.)В общем ладно,хоть так оно у меня работает,закрыли тему

 

 

Ничем он не аналогичен. Стоит увеличить у вас ширину обертки, как результат уже будет другим.

Так-же элемент в position absolute, выходит их потока, и другие  элементы его как-бы не видят. Если что-то захотите добавить - будут проблемы.