Hello everyone, I want to move the text a little lower to 3 and 4 with the help of nth-child, so as not to prescribe a class, which is not working, enlighten.

enter image description here

.how_pay { .item { text-align: center; position: relative; display: block; margin: 10px 0; a { position: absolute; display: block; width: 120px; bottom: 50px; left: 50px; font-size: rem-calc(15); color: $t-gray; font-weight: bolder; line-height: 1.1; transition: all .25s ease; &:hover { color: #008932;} } } .item { &:nth-child(3) a, &:nth-child(4) a { bottom: 40px; } } }

Closed due to the fact that off-topic participants Grundy , rjhdby , HamSter , aleksandr barakin , fori1ton Oct 14 '16 at 9:47 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - Grundy, rjhdby, HamSter, aleksandr barakin, fori1ton
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • 2
    html add. - HamSter
  • what does it mean: something does not work ? Depending on the markup, there may be different solutions. - Grundy

3 answers 3

Correctly not to prescribe it at all and not to push absolute'y where it should not be.

 section { text-align: center; counter-reset: i; } a { display: inline-block; vertical-align: middle; width: 115px; height: 115px; border-radius: 50%; border: 1px solid; } a:before { counter-increment: i; content: counter(i); display: block; font-size: 3em; } 
 <section> <a>Выбрать квартиру</a> <a>Выбрать способ оплаты</a> <a>Заключить договор и оплатить</a> <a>Мы готовим все документы</a> <a>Вы владелец квартиры</a> </section>

  • Why? As I understand it, he wants to trim the text along the center line, and your option will not roll. - Artem Gorlachev
  • @ArtemGorlachev, but I realized that at the top. For the central I can offer another option. - Qwertiy ♦
  • @ArtemGorlachev, added the answer with centering. - Qwertiy ♦
 .how_pay { .item { text-align: center; position: relative; display: block; margin: 10px 0; a { position: absolute; display: block; width: 120px; bottom: 50px; left: 50px; font-size: rem-calc(15); color: $t-gray; font-weight: bolder; line-height: 1.1; transition: all .25s ease; &:nth-of-type(3), &:nth-of-type(4) { bottom: 40px; } &:hover { color: #008932; } } } }

and mixin on rem will be more beautiful here:

 @mixin x-rem($property, $values) { $base-font-size: 16px; $px-values: (); $rem-values: (); @each $value in $values { @if $value==0 or $value==0px { $px-values: join($px-values, 0); $rem-values: join($rem-values, 0); } @else if type-of($value)==number and not unitless($value) and (unit($value)==px) { $new-rem-value: $value / $base-font-size; $px-values: join($px-values, round($value)); $rem-values: join($rem-values, #{$new-rem-value}rem); } @else { $px-values: join($px-values, round($value * $base-font-size)); $rem-values: join($rem-values, #{$value}rem); } } #{$property}: $px-values; #{$property}: $rem-values; }

    And here is the option with vertical centering.

     section { text-align: center; counter-reset: i; } a { display: inline-block; vertical-align: middle; width: 115px; height: 115px; border-radius: 50%; border: 1px solid; overflow: hidden; } a:before { counter-increment: i; content: counter(i); display: block; font-size: 3em; } div { height: 56px; background: antiquewhite; padding-bottom: 4px; } div:before, span { display: inline-block; vertical-align: middle; } div:before { content: ""; height: 100%; } 
     <section> <a><div><span>Выбрать квартиру</span></div></a> <a><div><span>Выбрать способ оплаты</span></div></a> <a><div><span>Заключить договор и оплатить</span></div></a> <a><div><span>Мы готовим все документы</span></div></a> <a><div><span>Вы владелец квартиры</span></div></a> </section>

    Or so:

     section { text-align: center; counter-reset: i; } a { display: inline-block; vertical-align: middle; width: 115px; height: 115px; border-radius: 50%; border: 1px solid; overflow: hidden; background: linear-gradient(to bottom, white 0, white 45%, antiquewhite 45%, antiquewhite 100%); } a:before { counter-increment: i; content: counter(i); display: block; font-size: 3em; } a:after, span { display: inline-block; vertical-align: middle; } a:after { content: ""; height: 56px; } 
     <section> <a><span>Выбрать квартиру</span></a> <a><span>Выбрать способ оплаты</span></a> <a><span>Заключить договор и оплатить</span></a> <a><span>Мы готовим все документы</span></a> <a><span>Вы владелец квартиры</span></a> </section>

    • one
      thank you for your help! - Viorel