Текст по центру

[extrabass4]

http://cssdeck.com/labs/hvhc0no2

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

 

[Aleksandr.L]

Можно было и без <span> обойтись, с помощью text-align и line-height.

[li4e]

Можно так http://cssdeck.com/labs/76kw7geg

Но я не знаю как правильно.

[extrabass4]

  On 1/10/2014 at 12:50 PM, Aleksandr.L said:

Можно было и без <span> обойтись, с помощью text-align и line-height.

На мой взгляд использовать line-height не корректно с условиям ,если в этом блоке в будущем будет не одна строчка , а болееюТО есть либо через спан или же искать другие тэги )

  On 1/10/2014 at 12:50 PM, li4e said:

Можно так http://cssdeck.com/labs/76kw7geg

Но я не знаю как правильно.

Обратите внимание ,что при использование display пропадает .container2  и сама фишка треугольника )

[Aleksandr.L]

  On 1/10/2014 at 12:59 PM, extrabass4 said:

 

  On 1/10/2014 at 12:50 PM, Aleksandr.L said:

Можно было и без <span> обойтись, с помощью text-align и line-height.

На мой взгляд использовать line-height не корректно с условиям ,если в этом блоке в будущем будет не одна строчка , а болееюТО есть либо через спан или же искать другие тэги )

 

 

Ну тогда, как выше предложили, использовать display: table-cell и vertical-align: middle. И <span> не нужен.

[extrabass4]

@extrabass4,

  On 1/10/2014 at 12:50 PM, Aleksandr.L said:

  On 1/10/2014 at 12:50 PM, li4e said:

Можно так http://cssdeck.com/labs/76kw7geg

Но я не знаю как правильно.

Обратите внимание ,что при использование display пропадает .container2  и сама фишка треугольника )

 

[ryter]

.container {

margin: 20px;

width:150px;

height: 80px;

background: #444;

border-radius: 5px;

position:relative;

color: #fff;

  text-align: center;

  line-height: 70px;

} 

 

.container2 {

 

position:absolute;

border-top: 10px solid #444;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

bottom: -10px;

left: 50%;

 

}

 

 

.text {

/* position:absolute;

padding-left: 47px;

padding-top: 20px; */

  width: 70px;

  display: inline-block;

  line-height: 20px;

  vertical-align: middle;

}

может так ?

Edited January 10, 2014 by ryter

[extrabass4]

  On 1/10/2014 at 1:11 PM, ryter said:

 

.container {

margin: 20px;

width:150px;

height: 80px;

background: #444;

border-radius: 5px;

position:relative;

color: #fff;

  text-align: center;

  line-height: 70px;

} 

 

.container2 {

 

position:absolute;

border-top: 10px solid #444;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

bottom: -10px;

left: 50%;

 

}

 

 

.text {

/* position:absolute;

padding-left: 47px;

padding-top: 20px; */

  width: 70px;

  display: inline-block;

  line-height: 20px;

  vertical-align: middle;

}

может так ?

 

Стало ещё хуже )) span остался , код стал ещё длинее и display не подходит выше я описал почему. Задача же сделать код как можно меньше

[li4e]

  On 1/10/2014 at 1:03 PM, extrabass4 said:

 

  On 1/10/2014 at 12:50 PM, Aleksandr.L said:

Можно было и без <span> обойтись, с помощью text-align и line-height.

На мой взгляд использовать line-height не корректно с условиям ,если в этом блоке в будущем будет не одна строчка , а болееюТО есть либо через спан или же искать другие тэги )

  On 1/10/2014 at 12:50 PM, li4e said:

Можно так http://cssdeck.com/labs/76kw7geg

Но я не знаю как правильно.

Обратите внимание ,что при использование display пропадает .container2  и сама фишка треугольника )

 

Так специально для этого сделал же с псевдо селектором :after и треуглоьник отображается!

Edited January 10, 2014 by li4e

[extrabass4]

  On 1/10/2014 at 1:35 PM, li4e said:

 

  On 1/10/2014 at 1:03 PM, extrabass4 said:

 

  On 1/10/2014 at 12:50 PM, Aleksandr.L said:

Можно было и без <span> обойтись, с помощью text-align и line-height.

На мой взгляд использовать line-height не корректно с условиям ,если в этом блоке в будущем будет не одна строчка , а болееюТО есть либо через спан или же искать другие тэги )

  On 1/10/2014 at 12:50 PM, li4e said:

Можно так http://cssdeck.com/labs/76kw7geg

Но я не знаю как правильно.

Обратите внимание ,что при использование display пропадает .container2  и сама фишка треугольника )

 

Так специально для этого сделал же с псевдо селектором :after и треуглоьник отображается!

 

Странно переходя по вашей ссылке(http://cssdeck.com/labs/76kw7geg)треугольник у меня не отображается....

Edited January 10, 2014 by extrabass4

[li4e]

И вправду странно.

 

http://cssdeck.com/labs/76kw7geg

 

А сейчас?

[ryter]

  On 1/10/2014 at 2:03 PM, li4e said:

И вправду странно.

 

http://cssdeck.com/labs/76kw7geg

 

А сейчас?

может просто человек через мозилу смотрит!

[extrabass4]

  On 1/10/2014 at 2:18 PM, ryter said:

 

  On 1/10/2014 at 2:03 PM, li4e said:

И вправду странно.

 

http://cssdeck.com/labs/76kw7geg

 

А сейчас?

может просто человек через мозилу смотрит!

 

Да смотрю всё в мозиле- вэтом видимо и проблема , а вы в каком браузере ? как я всегда считал ,что мозила не капризный браузер в отличии от к примеру ИЕ

[li4e]

Google Chrome

[ryter]

  On 1/10/2014 at 2:29 PM, extrabass4 said:

 

  On 1/10/2014 at 2:18 PM, ryter said:

 

  On 1/10/2014 at 2:03 PM, li4e said:

И вправду странно.

 

http://cssdeck.com/labs/76kw7geg

 

А сейчас?

может просто человек через мозилу смотрит!

 

Да смотрю всё в мозиле- вэтом видимо и проблема , а вы в каком браузере ? как я всегда считал ,что мозила не капризный браузер в отличии от к примеру ИЕ

 

display: table проблемы с absolute в ff

[extrabass4]

Так получается моё решение самое оптимальное для мозилы ? и каким лучше браузером пользоваться ,где всё работает ?