क्षैतिज और ऊर्ध्वाधर संरेखण

मैं कैसे लॉगिन बक्से के दोनों क्षैतिज और ऊर्ध्वाधर केंद्रित कर सकता है?क्षैतिज और ऊर्ध्वाधर संरेखण

<div class="container"> 
<div class="row"> 
<div class="col s12 m6"> 
    <div class="card"> 
     <div class="card-content"> 
      <span class="card-title black-text">Sign In</span> 
      <form> 
       <div class="row"> 
        <div class="input-field col s12"> 
         <input placeholder="Placeholder" id="firstname" type="text" class="validate"> 
         <label for="firstname" class="active">First Name</label> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="input-field col s12"> 
         <input placeholder="Placeholder" id="lastname" type="text" class="validate"> 
         <label for="lastname" class="active">Last Name</label> 
        </div> 
       </div> 
      </form> 
     </div> 
     <div class="card-action"> 
      <input type="submit" class="btn" value="Sign In"> 
     </div> 
    </div> 
</div>

मैं valign-wrapper और valign वर्ग का उपयोग कर की कोशिश की लेकिन यह काम नहीं करता:

यहाँ मेरी संरचना है।

स्रोत

2015-08-06 Ordidaad

आपने किस सीएसएस की कोशिश की है? – wmk

क्या आपने वर्टिकल और क्षैतिज केंद्रित सीएसएस के लिए Google खोज की है? उस पर गाइड का एक टन है। – Roope

नहीं, मैं भौतिक रूप ढांचे का उपयोग कर शुद्ध सीएसएस नहीं कर रहा हूं। – Ordidaad

आप की कोशिश की

.col.s12.m6{ 
    float: none; 
    margin: 100px auto; 
    width: 300px; 
    height: 300px; 
}

इस बेला बाहर की जाँच करें, http://fiddle.jshell.net/8vu47fb2/

उपयोग मार्जिन टॉप, margin-bottom केंद्र में बॉक्स संरेखित करने के लिए किया है।

स्रोत

2015-11-13 02:16:50

सेट पाठ div की संपत्ति संरेखित

<div class="input-field col s12" style="text-align:center"> 

<div class="input-field col s12" style="text-align:center"> 

<input placeholder="Placeholder" id="lastname" type="text" class="validate" style="vertical-align:middle"> 

<input placeholder="Placeholder" id="firstname" type="text" class="validate" style="vertical-align:middle">

यहाँ देख http://jsfiddle.net/kuqqdswg/

स्रोत

2015-11-13 04:11:54 repzero

भौतिक रूप में यह '.center-align' –

इस समाधान करने की कोशिश करो, मुझे आशा है कि यह आप

.card { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -moz-transform: translate(-50%, -50%) 
    -webkit-transform: translate(-50%, -50%) 
    -ms-transform: translate(-50%, -50%) 
    -o-transform: translate(-50%, -50%) 
    transform: translate(-50%, -50%); 
}

भी मदद कर सकते हैं की कोशिश कर सकते

body (or container-div) { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

स्रोत

2016-02-17 11:05:29 Kapil

संरेखित करने के लिए बस offset का उपयोग करें। कार्ड के दृश्य को आधे से बचाए गए आधे से ऑफसेट करें।

<div class="container"> 
    <div class="row"> 
    <div class="col s12 m6 offset-m3"> 
     <div class="card"> 
     <div class="card-content"> 
      <span class="card-title black-text">Sign In</span> 
      <form> 
      <div class="row"> 
       <div class="input-field col s12"> 
       <input placeholder="Placeholder" id="firstname" type="text" class="validate"> 
       <label for="firstname" class="active">First Name</label> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s12"> 
       <input placeholder="Placeholder" id="lastname" type="text" class="validate"> 
       <label for="lastname" class="active">Last Name</label> 
       </div> 
      </div> 
      </form> 
     </div> 
     <div class="card-action"> 
      <input type="submit" class="btn" value="Sign In"> 
     </div> 
     </div> 
    </div>

स्रोत

2016-02-28 19:08:53

जैसा ही है जैसा कि वर्णित रूप से संरेखित नहीं है। नीचे मेरा जवाब देखें। – friek108

भी उदाहरण के लिए काम नहीं करता है 'col s5' –

यहाँ उचित (materializecss) जिस तरह से यह करने के लिए है और गंदा सीएसएस के बिना:

<div class="valign-wrapper" style="width:100%;height:100%;position: absolute;"> 
    <div class="valign" style="width:100%;"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col s12 m6 offset-m3"> 
       <div class="card"> 
        <div class="card-content"> 
         <span class="card-title black-text">Sign In</span> 
         <form> 
          <div class="row"> 
          <div class="input-field col s12"> 
           <input placeholder="Placeholder" id="firstname" type="text" class="validate"> 
           <label for="firstname" class="active">First Name</label> 
          </div> 
          </div> 
          <div class="row"> 
          <div class="input-field col s12"> 
           <input placeholder="Placeholder" id="lastname" type="text" class="validate"> 
           <label for="lastname" class="active">Last Name</label> 
          </div> 
          </div> 
         </form> 
        </div> 
        <div class="card-action"> 
         <input type="submit" class="btn" value="Sign In"> 
        </div> 
       </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

स्रोत

2016-11-14 08:47:16 friek108

यह सही जवाब है, धन्यवाद। – lbpeppers

आप पूरी ऊंचाई herit को, html और body टैग से शुरू होने की जरूरत है।

स्रोत

2017-01-03 02:51:56 uruapanmexicansong

क्षैतिज और ऊर्ध्वाधर संरेखण

उत्तर

संबंधित मुद्दे