Centering Images
CSS உடன், நீங்கள் பல முறைகளுடன் படங்களை மையப்படுத்தலாம்.
ஒரு படத்தை கிடைமட்டமாக, செங்குத்தாக அல்லது இரண்டையும் மையப்படுத்தலாம்.
Center an Image Horizontally
கிடைமட்டமாக மையப்படுத்தப்பட்ட படத்தைக் காண்பிக்க, நாம் margin: auto; அல்லது display: flex; பயன்படுத்தலாம்.
1. Using margin: auto
ஒரு பக்கத்தில் கிடைமட்டமாக ஒரு படத்தை மையப்படுத்த ஒரு வழி margin: auto பயன்படுத்துவது.
<img> உறுப்பு இயல்பாக ஒரு inline உறுப்பாக இருப்பதால் (மற்றும் margin: auto inline உறுப்புகளுக்கு எந்த விளைவையும் கொண்டிருக்கவில்லை) display: block உடன் படத்தை ஒரு block உறுப்பாக மாற்ற வேண்டும்.
கூடுதலாக, நாம் ஒரு width வரையறுக்க வேண்டும். படத்தின் width பக்கத்தின் width ஐ விட சிறியதாக இருக்க வேண்டும்.
img {
display: block;
margin: auto;
width: 50%;
}2. Using display: flex
ஒரு பக்கத்தில் கிடைமட்டமாக ஒரு படத்தை மையப்படுத்த மற்றொரு வழி display: flex பயன்படுத்துவது.
இங்கே, <img> உறுப்பை ஒரு <div> கொள்கலனுக்குள் வைக்கிறோம்.
div கொள்கலனில் பின்வரும் CSS ஐ சேர்க்கிறோம்:
- display: flex
- justify-content: center (div கொள்கலனில் படத்தை கிடைமட்டமாக மையப்படுத்துகிறது)
div {
display: flex;
justify-content: center;
}
img {
width: 50%;
}Vertical and Horizontal Centering
செங்குத்தாக மற்றும் கிடைமட்டமாக மையப்படுத்தப்பட்ட படத்தைக் காண்பிக்க (உண்மையான மையப்படுத்தல்), நாம் display: flex; அல்லது display: grid; பயன்படுத்தலாம்.
1. Using display: flex
flexbox உடன் செங்குத்தாக மற்றும் கிடைமட்டமாக மையப்படுத்தப்பட்ட படத்தைக் காண்பிக்க, நாம் இவற்றின் கலவையைப் பயன்படுத்துகிறோம்:
- display: flex;
- justify-content: center; (கொள்கலனில் படத்தை கிடைமட்டமாக மையப்படுத்துகிறது)
- align-items: center; (கொள்கலனில் படத்தை செங்குத்தாக மையப்படுத்துகிறது)
- height: 600px; (கொள்கலனின் உயரம்)
div {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
border: 1px solid black;
}
img {
width: 50%;
}2. Using display: grid
grid உடன் செங்குத்தாக மற்றும் கிடைமட்டமாக மையப்படுத்தப்பட்ட படத்தைக் காண்பிக்க, நாம் இவற்றின் கலவையைப் பயன்படுத்துகிறோம்:
- display: grid;
- place-items: center; (கொள்கலனில் படத்தை கிடைமட்டமாக மற்றும் செங்குத்தாக மையப்படுத்துகிறது)
- height: 600px; (கொள்கலனின் உயரம்)
div {
display: grid;
place-items: center;
height: 600px;
border: 1px solid black;
}
img {
width: 50%;
}