मैं हेडर आईएमजी/बाकी तत्वों को स्थानांतरित किए बिना अपने शीर्षलेख सामग्री टेक्स्ट को केंद्र में ले जाना चाहता हूं। अगली छवि में आप ऊपर मेरे .portada-text और .portada botones को ऊपर मेरी एनएवी के पीछे देख सकते हैं। मैंने सफेद रंग के बक्सों में आकर्षित किया जहाँ मैं चाहूंगा कि मेरे div तत्व कहाँ हों। मैंने उन्हें पिता div (#portada) या प्रत्येक div बच्चे (.portada-text और .portada-botones) में पैडिंग और/या मार्जिन के साथ स्थानांतरित करने का प्रयास किया, लेकिन यह छवि को स्थानांतरित करता है या स्क्रीन को विस्तृत करता है नीचे और मैं बाकी तत्वों को स्थानांतरित किए बिना उन divs को स्थानांतरित करना चाहता हूं ...

enter image description here

मेरा एचटीएमएल

<section class="portada" id="portada">
    <div class="portada-texto">
        <h1>Hola, soy Diego Donoso</h1>
        <h2>Técnico Analista Programador</h2>
    </div>
    <div class="portada-botones">
        <button>Leer más</button>
        <button>Contáctame</button>
    </div>
</section>

मेरा सीएसएस

#portada{
    min-height: 100vh; /*usará todo el tamaño del largo dependiendo de la pantalla*/
    background-image: url(../images/banner1.webp); /*imagen de fondo*/
    background-size: cover; /*la imagen se expande a la pantalla*/
    background-color: rgb(30, 30, 30); /*color de imagen*/
    background-blend-mode: soft-light; /*tono de color de portada*/
    text-align: center;
}

#portada .portada-texto {
   display: flex;
   justify-content: center;
   flex-direction: column;
}

#portada .portada-texto h1,h2{
   color: white;
   font-size: 2em;
}

#portada .portada-botones button{
   color: white;
   background: #ff9800;
   width: auto;
   height: auto;
   font-size: 1.625em; /*26px*/
}
2
Diego Donoso 5 सितंबर 2021, 05:31

2 जवाब

सबसे बढ़िया उत्तर

यहां विंसेंट से पूरी तरह सहमत हैं, यह कुछ इस तरह की नौकरी की तरह दिखता है:

.classNameOfElementsToMove {
position: relative;
left: 100px;
}

यह अन्य तत्वों को प्रभावित किए बिना 100px वर्ग के सभी तत्वों को दाईं ओर ले जाएगा (अपनी पसंद के अनुसार आवश्यकतानुसार समायोजित करें)। हालांकि ध्यान दें कि (हालांकि मुझे लगता है कि यह आपके मामले में कोई फर्क नहीं पड़ेगा) तत्व अभी भी पृष्ठ के प्रवाह में जगह लेंगे जैसे कि वे अपनी सामान्य स्थिति में थे।

0
Joel Youngberg 5 सितंबर 2021, 02:58

विभिन्न पोजिशनिंग योजनाओं के लिए इस संदर्भ को देखें: मोज़िला: स्थिति - सीएसएस

डिफ़ॉल्ट रूप से, सभी तत्व स्थिर होते हैं और यदि आप उनके मार्जिन/पैडिंग को बदलते हैं तो आप स्वाभाविक रूप से पूरे तत्व की चौड़ाई और ऊंचाई बढ़ा देंगे। आप बाएँ और दाएँ गुण भी बदल सकते हैं, लेकिन यदि तत्व स्थिर हैं तो यह कुछ नहीं करता है।

मूल रूप से आप सापेक्ष चाहते हैं जो आपको तत्वों को उस स्थान पर रखने की अनुमति देगा जहां वे स्वाभाविक रूप से सेट होंगे और यह "किसी अन्य तत्व की स्थिति को प्रभावित नहीं करता है; इस प्रकार, तत्व के लिए दिया गया स्थान पृष्ठ लेआउट वैसा ही है जैसे कि स्थिति स्थिर थी"।

2
Vincent 5 सितंबर 2021, 02:42