Yumaloq tugma elementi o'zaro faoliyat brauzerda bitta chizani markazlashtiring

To'liq tugmachaning o'rtasida joylashgan bitta belgi mavjud

<button>+</button>

Quyidagi CSS bor:

button {
    border: 2px solid lightgrey;
    border-radius: 20px;
    background-color: #fff;
    outline: none;
    height: 40px;
    width: 40px;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    color: grey;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

JSFIDDLE

Ehtimol, bu erda ko'p CSS xususiyatiga ega bo'lishim kerak, lekin ko'p turli xil echimlarni sinab ko'rdim. Ushbu tugmani xrom, safari va iPadda sinab ko'rdim:

enter image description here

enter image description here

enter image description here

Ularning hech biri tugma markazida aniq ko'rinmaydi. Ushbu cross-brauzerni qanday qilishim mumkin?

UPDATE: Hatto quyida keltirilgan takliflar bilan ham, men turli brauzerlarda farqlarni ko'rmoqdaman. Pixel-perfect markazlashtirilgan belgilar hali ham qiyin. O'tkazilgan yechim bu muammolarni echadigan charslarga svg dan foydalanish.

0

8 javoblar

Siz ushbu CSS bilan ishlashingiz mumkin:

button {
  border: 2px solid lightgrey;
  border-radius: 20px;
  background-color: #fff;
  outline: none;
  height: 40px;
  width: 40px; 
  cursor: pointer;
  user-select: none;
  position: relative;
}

span {
  color: grey;
  font-size: 30px;
  font-weight: 700;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Here's a jsfiddle: https://jsfiddle.net/e490xzpy/5/

1
qo'shib qo'ydi

Siz ushbu CSS bilan ishlashingiz mumkin:

button {
  border: 2px solid lightgrey;
  border-radius: 20px;
  background-color: #fff;
  outline: none;
  height: 40px;
  width: 40px; 
  cursor: pointer;
  user-select: none;
  position: relative;
}

span {
  color: grey;
  font-size: 30px;
  font-weight: 700;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

Here's a jsfiddle: https://jsfiddle.net/e490xzpy/5/

1
qo'shib qo'ydi

Men sizning kodingizni bekor qilmadim, aslida o'zimga o'xshash narsalarni kodlashni boshladim. Men siz bilan tajribamni bitta tugma ichidagi belgi bilan mutlaqo markazlashtirish (yoki o'rta yoki har qanday) haqida baham ko'rmoqdaman.

  1. Bir vaqtning o'zida line-height va border dan foydalanayotgan bo'lsangiz, chegaraning umumiy kengligini (yuqori va pastki chegara kengligining yig'indisi) ,
  2. Mutlaq markazlashtirish tugmalari bilan foydalanadigan har bir shrift yuzi bilan doimo qoniqarli bo'lmasligi mumkin. Shriftning dastlabki satrida markazlashuv biroz o'chirilishi mumkin.

Shunday qilib, mening bu erim. Bu kabi narsalar uchun tez-tez ishlatadigan ikkita metod:

  • Chegaraning kengligini chiziq balandligidan olib tashlang va u bilan xursand bo'ling.
  • Ko'rsatilgan joylashuv tugmasi ichidagi qo'shimcha elementni qo'shib, uni bir qadam oldinga olib chiqing va CSS-dan foydalaning.

Buni o'zingiz tekshirish uchun ba'zi misollar.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.btn {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  border: 2px solid;
  width: 40px;
  height: 40px;
  line-height: 36px;
  /* line-height = (height) - (border-top-width) + (border-bottom-width); */
  background-color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 30px;
}

.btn-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

Button without extra-element

<button class="btn">+</button>
<button class="btn">X</button>
<button class="btn">x</button>

Button with extra-element (.btn-icon)

<button class="btn">+</button>
<button class="btn">X</button>
<button class="btn">x</button>
</div> </div>

Siz uchun eng mos keladigan narsalarni ko'ring. Umid qilgandim. Cheers!

1
qo'shib qo'ydi

Men sizning kodingizni bekor qilmadim, aslida o'zimga o'xshash narsalarni kodlashni boshladim. Men siz bilan tajribamni bitta tugma ichidagi belgi bilan mutlaqo markazlashtirish (yoki o'rta yoki har qanday) haqida baham ko'rmoqdaman.

  1. Bir vaqtning o'zida line-height va border dan foydalanayotgan bo'lsangiz, chegaraning umumiy kengligini (yuqori va pastki chegara kengligining yig'indisi) ,
  2. Mutlaq markazlashtirish tugmalari bilan foydalanadigan har bir shrift yuzi bilan doimo qoniqarli bo'lmasligi mumkin. Shriftning dastlabki satrida markazlashuv biroz o'chirilishi mumkin.

Shunday qilib, mening bu erim. Bu kabi narsalar uchun tez-tez ishlatadigan ikkita metod:

  • Chegaraning kengligini chiziq balandligidan olib tashlang va u bilan xursand bo'ling.
  • Ko'rsatilgan joylashuv tugmasi ichidagi qo'shimcha elementni qo'shib, uni bir qadam oldinga olib chiqing va CSS-dan foydalaning.

Buni o'zingiz tekshirish uchun ba'zi misollar.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.btn {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  border: 2px solid;
  width: 40px;
  height: 40px;
  line-height: 36px;
  /* line-height = (height) - (border-top-width) + (border-bottom-width); */
  background-color: #fff;
  border-radius: 50%;
  font-weight: 700;
  font-size: 30px;
}

.btn-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

Button without extra-element

<button class="btn">+</button>
<button class="btn">X</button>
<button class="btn">x</button>

Button with extra-element (.btn-icon)

<button class="btn">+</button>
<button class="btn">X</button>
<button class="btn">x</button>
</div> </div>

Siz uchun eng mos keladigan narsalarni ko'ring. Umid qilgandim. Cheers!

1
qo'shib qo'ydi
button {
border: 2px solid lightgrey;
    border-radius: 50%;
    background-color: #fff;
    outline: none;
    height: 40px;
    width: 40px;
    font-size: 30px;
    font-weight: 700;
    line-height: 10px;
    color: grey;
    cursor: pointer;
    user-select: none;
    text-align: center;
    display:block;
}

And the fiddler link is https://jsfiddle.net/3gfkpm0h/1/

1
qo'shib qo'ydi
button {
border: 2px solid lightgrey;
    border-radius: 50%;
    background-color: #fff;
    outline: none;
    height: 40px;
    width: 40px;
    font-size: 30px;
    font-weight: 700;
    line-height: 10px;
    color: grey;
    cursor: pointer;
    user-select: none;
    text-align: center;
    display:block;
}

And the fiddler link is https://jsfiddle.net/3gfkpm0h/1/

1
qo'shib qo'ydi

Bu CSS-ni faqatgina tugmasini bosing. SVG-ni piktogrammalar uchun ishlatishni afzal ko'raman, lekin siz bu tugmani faqat tugmachadan foydalanishingiz mumkin :)

Belgilash

<button class="plus-button plus-button--small"></button>
<button class="plus-button"></button>
<button class="plus-button plus-button--large"></button>

SCSS

.plus-button {
    border: 2px solid lightgrey;
    background-color: #fff;
    font-size: 16px;
    height: 2.5em;
    width: 2.5em;
    border-radius: 999px;
    position: relative;

    &:after,
    &:before {
        content: "";
        display: block;
        background-color: grey;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    &:before {
        height: 1em;
        width: 0.2em;
    }

    &:after {
        height: 0.2em;
        width: 1em;
    }
}

.plus-button--small {
    font-size: 12px;
}

.plus-button--large {
    font-size: 22px;
}

https://jsfiddle.net/robi_osahan/gwgL7Loj/

1
qo'shib qo'ydi

Bu CSS-ni faqatgina tugmasini bosing. SVG-ni piktogrammalar uchun ishlatishni afzal ko'raman, lekin siz bu tugmani faqat tugmachadan foydalanishingiz mumkin :)

Belgilash

<button class="plus-button plus-button--small"></button>
<button class="plus-button"></button>
<button class="plus-button plus-button--large"></button>

SCSS

.plus-button {
    border: 2px solid lightgrey;
    background-color: #fff;
    font-size: 16px;
    height: 2.5em;
    width: 2.5em;
    border-radius: 999px;
    position: relative;

    &:after,
    &:before {
        content: "";
        display: block;
        background-color: grey;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    &:before {
        height: 1em;
        width: 0.2em;
    }

    &:after {
        height: 0.2em;
        width: 1em;
    }
}

.plus-button--small {
    font-size: 12px;
}

.plus-button--large {
    font-size: 22px;
}

https://jsfiddle.net/robi_osahan/gwgL7Loj/

1
qo'shib qo'ydi