Connect with us

tech help

▷How To Button Align Center Css-Easily 3 steps in हिंदी

How To Button Align Center- how to button align center left right css- how to align button in center in css- how to align a button to center in css- how to align button in center in css

हम आपके ज्ञान और आपकी सहयता प्रदान करने वाले लेख लिखते है। हमने वेबसाइट निर्माण में सहयोग प्रदान करने वाले html के अन्य लेख लिखे है। लेकिन एक परेशान करने वाला सवाल है। की how to button align center left right css क्या है। किस प्रकार का कॉड लिखा जाता है। तो आज हम आपको उदाहरण के साथ button align css कॉड समझने वाले है। तो चलिए जानते है।

Basic information abbot how to button align center left right CSS

सबसे पहले हम आपको जानकारी देना चाहते है। की जब भी हम किसी div, image या button को अपनी आवश्कता के अनुशार किसी निश्चित स्थान में रखते है। तो हम align tag का उपयोग करते है। लेकिन कुछ element ऐसे भी होते है। जहा align टैग काम नहीं करता है। तब हम एक अलग property का उपयोग करते है। जिसका नाम position property  है। इसके एक से अधिक प्रकार होते है। जो अधिक उपयोग में लिए जाते है। इसके प्रकार कुछ प्रकार होते है।

  • relative
  • absolute
  • fixed
  • sticky

necessary css property with positions

इस property का उपयोग करने के लिए हमें कुछ CSS कोड का उपयोग इसके साथ करना अनिवार्य होता है। क्योंकि इस कोड के निर्देश के अनुशार ही position property काम कर पाती है। इसके प्रकार कुछ इस तरह से लिखे जाते है।

  • left 
  • right 
  • top 
  • bottom

हम जिस भी element को पोजीशन देना चाहते है। उसकी दिशा को निर्देश देने के लिए इसका उपयोग किया जाता है। आप लेफ्ट और राइट में किसी एक का चयन कर सकते है। उसी प्रकार टॉप और बॉटम में भी किसी एक का चयन करना होता है। हम आगे इनको बारीकी से समझेंगे। आप केवल देख लीजिये। यह हमें मदद कुछ इस प्रकार करता है। आप इस इमेज को देख सकते है।

how to button align center-how to button align center left right css- how to align button in center in css- how to align a button to center in css- how to align button in center in css- how to align submit button in center in css- how to align button center in css

आप इस इमेज में देख सकते है। हमने इसमें x or y ग्राफ को प्लस और माइनस में वेलु लिखी है। इसमें red color bottom and top को दर्शाता है। उसी प्रकार green color left and right को दर्शाता है। अगर हम माइनस में वेलु देंगे तो हमारा element ऊपर की और जायेगा। और अगर हम प्लस में वेलु देंगे तो हमारा element निचे की और जायेगा। ऐसी प्रकार left or right के लिए भी काम करता है। तो चलिए। अब हम इसका उपयोग करते है।

relative position button experiment

सबसे पहले हम relative position का उपयोग करते है। हम आपको बता दे की relative position का उपयोग करके जब भी हम किसी element की position को ऊपर या निचे खिसकने के लिए left या top वेलु देते है। तो वह element अपने स्थान से दुरी को नाप कर खिसकता है। वह body से दुरी को नहीं नापता हैं। चलिए एक HTML CODE लिखते है।

try code

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            position: relative;
            bottom: 0px;
            left: 50px;
            background-color: rgb(255, 102, 0);
            color: white;
            border-radius: 23px;
            padding: 14px;
        }
    </style>
</head>
<h2>project front page design</h2>
<body>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p><button>
        mybuttonname
    </button>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p>
</body>
</html>

इस कोड का आउटपुट हमें कुछ इस प्रकार से दिखाई देता है। इसमें हमने दो पेराग्राफ बटन के ऊपर की और लिखे है। दो पेराग्राफ बटन के निचे की साइड लिखे है।

how to button align center-how to button align center left right css- how to align button in center in css- how to align a button to center in css- how to align button in center in css- how to align submit button in center in css- how to align button center in css

आप इस कॉड में देख सकते है। हमने इस कोड में position: relative का उपयोग किया है। और इसके साथ हमने bottom: 0px; left: 50px; लिखा है। bottom: 0px; लिखने पर ये button अपनी जगह से हिला नहीं। लेकिन left: 50px; लिखने के कारण यह लेफ्ट से 50px खिसक गया है। ऐसा इसलिए हुआ है। क्योंकि यह अपनी जगह से px को नाप कर खिसकता है। अगर हम इसके bottom: 0px; को minus या plus करते है। तो यह खिसक जाता है। आपको ये बात ध्यान में रखनी है। की यह अपनी ( निर्धारित ) relative position से ही दुरी को नापता है।

fixed position button experiment

अब हम fixed position का उपयोग करते है। button position को चेंग करने के लिए। इसके लिए पहले हम code को लिखते है। और उसके बाद हम आपको बताते है। की fixed position का उपयोग किस लिए व किस प्रकार किया जाता है।

try code

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            position: fixed;
            top: 0px;
            left: 50px;
            background-color: rgb(255, 102, 0);
            color: white;
            border-radius: 23px;
            padding: 14px;
        }
    </style>
</head>
<h2>project front page design</h2>
<body>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p><button>
        mybuttonname
    </button>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p>
</body>
</html>

इस कोड का उपयोग करने के बाद हमे इसका आउटपुट कुछ इस प्रकार दिखाई देता है।

how to button align center-how to button align center left right css- how to align button in center in css- how to align a button to center in css- how to align button in center in css- how to align submit button in center in css- how to align button center in css

अब आप देखिये की हमने इस code में केवल position: fixed; top: 0px; left: 50px; लिखा है। लेकिन इस इमेज में आप देख सकते है। की हमने जैसे ही top: 0px; left: 50px; लिखा तो button स्क्रीन में ऊपर की तरफ पहुंच गया है। ऐसा इसलिए हुआ है। क्योंकि यह पूरी स्क्रीन की body से px (pixel) की दुरी को नापता है। लेकिन relative position में px (pixel) की दुरी उसी स्थान से नापता है। जहा button पहले से मौजूद होता है। इसकी एक विशेषता यह भी रहती है। की आप जब अपने पेज को ऊपर या निचे की साइड खिसकाते है। तो यह button अपनी जगह पर ही रहता है। यह बटन ऊपर या निचे की साइड नहीं जाता है।

sticky position button experiment

अब हम sticky position के बारे में भी जानकारी प्राप्त करते है। की हमे इसका code किस प्रकार लिखा है। व साथ ही इसका उपयोग किस प्रकार किया जाता है। इसकी क्या विशेषता है।

try code

<!DOCTYPE html>
<html>
<head>
    <style>
        button {
            position: sticky;
            top: 50px;
            left: 50px;
            background-color: rgb(255, 102, 0);
            color: white;
            border-radius: 23px;
            padding: 14px;
        }
    </style>
</head>
<h2>project front page design</h2>
<body>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p><button>
        mybuttonname
    </button>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p>
</body>
</html>

इस कोड को लिखने के बाद इसका आउटपुट हमें मोबाईल या लैपटॉप की स्क्रीन में कुछ इस प्रकार दिखाई देता है।

how to button align center-how to button align center left right css- how to align button in center in css- how to align a button to center in css- how to align button in center in css- how to align submit button in center in css- how to align button center in css

आप इस इमेज में देख सकते है। की हमारा button स्क्रीन में ऊपर से कुछ दुरी को छोड़ कर दिखाई दे रहा है। इसका कारण यह रहता है। की sticky position कुछ कुछ fixed position से मिलती जुलती है। इसमें भी हमने जब अपने पेज को ऊपर की तरफ खिसकाया तो यह button ऊपर जाते ही फिक्स हो गया। लेकिंन यह top :50px ; जगह का स्पेश छोड़ कर स्टिक हुआ है। जैसा की आप code में देख सकते है। की हमने position: sticky; top: 50px; लिखा है। आप इन position का उपयोग किसी भी element के लिए उपयोग कर सकते है। हमने केवल आपको समझने के लिए button का उपयोग किया है।

absolute position button experiment

यह position absolute भी स्क्रीन के अकॉर्डिंग काम करता है। लेकिन इसमें आप div या span भी का उपयोग कर सकते है। चलिए जानते है। कैसे हम div या span का उपयोग कर सकते है। इसके लिए पहले हम code का लिखते है। इसके बाद हम कोड को समझेंगे।

try code

<!DOCTYPE html>
<html>
<head>
    <style>
        div.one {
            position: relative;
            background-color: rgb(59, 59, 92);
            height: 300px;
            width: 300px;
        }
        button {
                          position: absolute;
            top: 0px;
            left: 0px;
            background-color: rgb(255, 102, 0);
            color: white;
            border-radius: 23px;
            padding: 14px;
        }
    </style>
</head>
<h2>project front page design</h2>
<body>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.</p>
    <div class="one">
        <button>
            mybuttonname
        </button></div>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p>
    <p>First of all, we use relative position. We can tell you that by using relative position whenever we give a left
        or top value to move the position of an element up or down. So that element moves and measures the distance from
        its location. He does not measure distance with body. Let's write a code.
    </p>
</body>
</html>

इसका आउटपुट हमें मोबाईल या लैपटॉप स्क्रीन में कुछ इस प्रकार दिखाई देता है।

how to button align center left right css- how to align button in center in css- how to align a button to center in css- how to align button in center in css- how to align submit button in center in css- how to align button center in css-how to button align center

आप इस इमेज में देख सकते है। की इसमें आपको एक blue color का बॉक्स दिखाई दे रहा है। और हमारा button बॉक्स में ऊपर की और एक साइड में चपका हुआ दिखाई दे रहा है। ऐसा इसलिए हुआ है। button का absolute रेलटिव div को बनाया है। इसका code आप देख सकते है। जो कुछ इस प्रकार <div class=”one”><button>mybuttonname</button></div> आपको दिखाई दे रहा है। और हमने div को position: relative; दी है।

div को position: relative लिखने के कारण ही बटन केवल डिव के भीतर ही px (pixel) को नापता है। जैसा की हमने button को top: 0px; left: 0px; लिखा है। तो यह एक कोने में है। अगर आप top: 0px; left: 0px; को बढ़ाते या घटते है।

तो यह केवल बॉक्स के भीतर ही रहेगा। लेकिन अगर आप div की position: relative; को हटाते है। तो यह पूरी स्क्रीन के अकॉर्डिंग काम करेगा।यह बटन पेज के साथ ऊपर या निचे होता है। इसका उपयोग आप div या span के बिना भी उपयोग कर सकते है। अगर आपका कोई सवाल या सुझाव हो तो हमें कमेंट के माध्यम से सूचित करे।

read more

▷html form with code in hindi

▷How To Create Table In Html In Hindi

▷What Is Web Page In Hindi

Information Source: w3school and quora

Click to comment

Leave a Reply

tranding