Div tasvirni vertikal va gorizontal tarzda markazlashtirilgan emasmi?

Qanday harakat qilsam bo'lsin, rasmim yuqoridagi sarlavha bilan emas. Agar kimdir menga kodni to'g'irlashni taklif qilsa, bu juda minnatdor bo'ladi. Oldindan rahmat.

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

img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 675px;
  height: 418px;
  margin-top: -250px;
  /* Half the height */
  margin-left: -250px;
  /* Half the width */
}

body {
  background-color: black;
}

h1 {
  color: white;
  text-align: center;
}

p {
  color: white;
  font-family: verdana;
  font-size: 20px;
}

Text

<div class="img">
  
</div>
</div> </div>

0
qo'shib qo'ydi muallif Xorifelse, manba
Hechqisi yo'q, men bu muammoni topdim. Margaritning yuqori qismini o'zgartirib, kenglik va balandlikning yarmigacha qoldirilgan bo'lishi kerak edi. Shunga qaramay, rahmat.
qo'shib qo'ydi muallif scwbrian, manba
Hechqisi yo'q, men bu muammoni topdim. Margaritning yuqori qismini o'zgartirib, kenglik va balandlikning yarmigacha qoldirilgan bo'lishi kerak edi. Shunga qaramay, rahmat.
qo'shib qo'ydi muallif scwbrian, manba

8 javoblar

margin-top va margin-chapni kenglik va balandlikning yarmini o'lchov sifatida belgilashingiz kerak.

yoki elementning hajmini bilmasangiz, siz foydalanishingiz mumkin

aylantirish: tarjima qilish (-50%, -50%);

vertikal va gorizontal ravishda markazlashtiriladi

img {
   position: absolute;
   top: 50%;
   left: 50%;
   /* width: 675px;
   height: 418px; */
   transform: translate(-50%, -50%);
}

boshqa usul:

img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
}

this is a guide

1
qo'shib qo'ydi

margin-top va margin-chapni kenglik va balandlikning yarmini o'lchov sifatida belgilashingiz kerak.

yoki elementning hajmini bilmasangiz, siz foydalanishingiz mumkin

aylantirish: tarjima qilish (-50%, -50%);

vertikal va gorizontal ravishda markazlashtiriladi

img {
   position: absolute;
   top: 50%;
   left: 50%;
   /* width: 675px;
   height: 418px; */
   transform: translate(-50%, -50%);
}

boshqa usul:

img {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto;
}

this is a guide

1
qo'shib qo'ydi

left: 50% parametrini left: 43% ga o'zgartirishni harakat qilib ko'ring. Bu sizni istagan joyga olib kelish kerak.

1
qo'shib qo'ydi

left: 50% parametrini left: 43% ga o'zgartirishni harakat qilib ko'ring. Bu sizni istagan joyga olib kelish kerak.

1
qo'shib qo'ydi

CSS-dan foydalaning transform: translate (-50%, -50%) :

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

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 675px;
   height: 418px;
   transform: translate(-50%, -50%);
}


body {
    background-color: black;
}

h1 {
    color: white;
    text-align: center;
}

p {
    color : white;
    font-family: verdana;
    font-size: 20px;
}

<body>

Text

<div class="img">
  
</div>

</body>
</div> </div>

0
qo'shib qo'ydi

CSS-dan foydalaning transform: translate (-50%, -50%) :

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

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 675px;
   height: 418px;
   transform: translate(-50%, -50%);
}


body {
    background-color: black;
}

h1 {
    color: white;
    text-align: center;
}

p {
    color : white;
    font-family: verdana;
    font-size: 20px;
}

<body>

Text

<div class="img">
  
</div>

</body>
</div> </div>

0
qo'shib qo'ydi

Sinash:

<!DOCTYPE HTML>
<html>
<head>
<title>HTML Reference</title>
</head>
<body>

Text

<div class="img">
  
</div>

</body>
</html>
0
qo'shib qo'ydi

Sinash:

<!DOCTYPE HTML>
<html>
<head>
<title>HTML Reference</title>
</head>
<body>

Text

<div class="img">
  
</div>

</body>
</html>
0
qo'shib qo'ydi