सवाल छवि को क्षैतिज रूप से कैसे केंद्रित करें और इसे कंटेनर के नीचे संरेखित करें?


मैं एक छवि को क्षैतिज रूप से कैसे केंद्रित कर सकता हूं और एक ही समय में कंटेनर के नीचे गठबंधन कर सकता हूं?

मैं क्षैतिज रूप से छवि को अपने आप केंद्रित करने में सक्षम हूं। मैं कंटेनर के तल को अपने आप से संरेखित करने में भी सक्षम हूं। लेकिन मैं एक ही समय में दोनों करने में सक्षम नहीं हूं।

यही सब कुछ मेरे पास है:

.image_block {
    width: 175px;
    height: 175px;
    position: relative;
    margin: 0 auto;
}
.image_block a img {
position: absolute;
bottom: 0;
}

<div class="image_block">
    <a href="..."><img src="..." border="0"></a>
</div>

वह कोड छवि को div के नीचे संरेखित करता है। मुझे div के अंदर क्षैतिज रूप से छवि को केंद्र बनाने के लिए जोड़ने / बदलने की क्या ज़रूरत है? छवि आकार हाथ से पहले ज्ञात नहीं है लेकिन यह 175x175 या उससे कम होगा।


37
2017-11-18 19:37


मूल




जवाब:


.image_block    {
    width: 175px;
    height: 175px;
    position: relative;
}

.image_block a  {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
}

.image_block img    {
/*  nothing specific  */
}

व्याख्या: पूरी तरह से स्थित एक तत्व निकटतम माता-पिता के सापेक्ष होगा जिसमें गैर स्थैतिक स्थिति होती है। मुझे लगता है कि आप कैसे खुश हैं के साथ खुश हैं .image_block प्रदर्शित करता है, इसलिए हम वहां रिश्तेदार स्थिति छोड़ सकते हैं।

जैसे, <a> तत्व के सापेक्ष तैनात किया जाएगा .image_block, जो हमें नीचे संरेखण देगा। तब हम text-align: center  <a> तत्व, और इसे 100% चौड़ाई दें ताकि यह आकार हो .image_block

<img> अंदर <a> फिर उचित रूप से केंद्र होगा।


63
2017-11-18 19:55



बहुत बहुत धन्यवाद। यह एफएफ, आईई 6, आई 7, और क्रोम में पूरी तरह से काम करता है। - Echo
सरल और प्रभावी - 321zeno
का उपयोग करने के लिए +1 <a> वह पहले से ही था - Magicode


यह भी काम करता है (इस से एक संकेत लिया सवाल)

.image_block {
  height: 175px;
  width:175px;
  position:relative;
}
.image_block a img{
 margin:auto; /* Required */
 position:absolute; /* Required */
 bottom:0; /* Aligns at the bottom */
 left:0;right:0; /* Aligns horizontal center */
 max-height:100%; /* images bigger than 175 px  */
 max-width:100%;  /* will be shrinked to size */ 
}

17
2018-01-04 11:08



अति उत्कृष्ट! यह मेरे लिए काम किया - AndrewC
मैं दृढ़ता से यह जवाब पसंद करता हूं। बहुत अच्छा। - Michael P.


यह मुश्किल है; असफल होने का कारण यह है कि आप पूरी तरह से स्थित होने पर मार्जिन या टेक्स्ट-एलाइन के माध्यम से स्थिति नहीं बना सकते हैं।

अगर छवि div में अकेली है, तो मैं इस तरह कुछ सुझाता हूं:

.image_block {
    width: 175px;
    height: 175px;
    line-height: 175px;
    text-align: center;
    vertical-align: bottom;
}

आपको छड़ी की आवश्यकता हो सकती है vertical-align इसके बजाय छवि पर कॉल करें; परीक्षण के बिना वास्तव में यकीन नहीं है। का उपयोग करते हुए vertical-align तथा line-height हालांकि, पूर्ण स्थिति के साथ गड़बड़ करने की कोशिश करने के बजाय, आपको बहुत बेहतर इलाज करने जा रहा है।


3
2017-11-18 19:56





नहीं होगा

margin-left:auto;
margin-right:auto;

में जोड़ा गया .image_block एक img चाल करो?
ध्यान दें कि यह आईई 6 में काम नहीं करेगा (शायद 7 सुनिश्चित नहीं है)
वहां आपको करना होगा .image_block कंटेनर डिव

text-align:center;

position:relative; एक समस्या भी हो सकती है।


3
2017-11-18 19:44





हटाए position: relative; लाइन। मुझे यकीन नहीं है कि वास्तव में क्यों, लेकिन यह मेरे लिए इसे ठीक करता है।


0
2017-11-18 19:42



स्थिति: युक्त तत्व पर रिश्तेदार को इसके भीतर एक तत्व को पूरी तरह से स्थापित करने की आवश्यकता होती है। - Zack The Human


आपने कोशिश की है:

.image_block{
text-align: center;
vertical-align: bottom;
}

0
2017-11-18 19:55





#header2
{
   display: table-cell;
   vertical-align: bottom;
   background-color:Red;
}


<div style="text-align:center; height:300px; width:50%;" id="header2">
<div class="right" id="header-content2">
  <p>this is a test</p>
</div>
</div>

0
2017-10-07 15:49