CSSFloat propertyDisplay сипатында кескіндерді туралау әдістеріInline-blockText-align propertyFlexbox сипаты орнатылған.CSS ішіндегі кескіндерді туралаудың қосымша жолдары

CSS-те кескінді туралау әдістері

Веб-беттегі кескінді туралау үшін CSS-те бірнеше әдістерді қолдануға болады:

• қалқымалы қасиет
• кірістірілген блок мәні бар сипатты көрсету
• мәтінді туралау қасиеті
• flexbox қасиеті

қалқымалы қасиет

float қасиеті кескінді солға немесе оңға туралауға мүмкіндік береді. Бұл әрекетті орындау үшін кескінді қай жерде туралағыңыз келетініне байланысты мәнді солға немесе оңға орнатуыңыз керек:

      img {
        float: left; /* или right */
      }
    

кірістірілген блок мәні бар сипатты көрсету

Кескінді туралаудың тағы бір жолы — inline-block мәнімен көрсету сипатын пайдалану:

CSS-те суретті әртүрлі тәсілдермен ортаға салу, CSS бейне курсы, 32-сабақ

      img {
        display: inline-block;
        vertical-align: middle;
      }
    

Сондай-ақ кескіннің тік туралануын орнатуға болады.

мәтінді туралау қасиеті

Мәтінді туралау сипатын контейнер ішіндегі кескінді туралау үшін пайдалануға болады:

      .container {
        text-align: center;
      }
      img {
        display: inline-block;
      }
    

flexbox қасиеті

Flexbox сипатын пайдалану арқылы икемді контейнер жасауға және оның ішіндегі кескіндерді туралауға болады:

      .container {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    

Сондай-ақ, қалаған әсерге жету үшін әр сурет үшін әртүрлі сипаттарды орнатуға болады.

CSS ішіндегі кескіндерді туралаудың басқа жолдары

Негізгі әдістерден басқа, веб-беттегі кескіндерді туралаудың басқа жолдары бар:

• позиция қасиеті
• маржа қасиеті
• сипатты түрлендіру
• тор қасиеті

позиция қасиеті

Позиция сипатын пайдаланып, беттегі суреттің орнын басты элементке немесе құжатқа қатысты орнатуға болады:

  img {
    position: absolute; /* или relative */
    left: 0;
    top: 0;
  }

Бұл жағдайда кескін үшін координаттарды орнатуға және оның орнын өзгертуге болады.

маржа қасиеті

Оң және сол жақ жиектерді орнату арқылы кескінді көлденеңінен туралау үшін маржа сипатын пайдалануға болады:

  img {
    display: block;
    margin: 0 auto;
  }

Кескінді орталау үшін теріс мәндерді де пайдалануға болады:

  img {
    display: block;
    margin: 0 -50%;
  }

сипатты түрлендіру

Трансформация қасиеті кескіндерді қоса, элементтің пішінін, өлшемін және орнын өзгертуге мүмкіндік береді:

  img {
    transform: rotate(45deg);
  }

Сондай-ақ, беттегі кескінді жылжыту үшін аудару сипатын пайдалануға болады:

  img {
    transform: translate(50px, 50px);
  }

тор қасиеті

Grid сипатын пайдаланып, бетте элементтер торын жасауға және оның ішіндегі кескіндерді туралауға болады:

  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

Бұл жағдайда қалаған нәтижені алу үшін тор мен кескіндерге әртүрлі параметрлерді орнатуға болады.