Inhalt vertikal ausrichten innen div

-1

Ich übe meine CSS und Bootstrap Fähigkeiten und steckte mit vertikalen und horizontalen Ausrichtung des Inhalts in der Mitte. Ich bin sicher, dass ich hier etwas vermisse, aber ich bin nicht in der Lage, es herauszufinden.Inhalt vertikal ausrichten innen div

<div class="container"> 
    <div class="jumbotron"> 
     <h1>Heading here.</h1> 
     <p>Some random text goes here.</p> 
    </div> 
</div> 

<div class="parent container text-center"> 
    <div class="row child text-center"> 
     <ul class="list-inline lis"> 
      <li class="box par"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg"/> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
      <li class="box par container"> 
       <a href="#" class="ch"> 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
        <p>Something random again.</p> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div>

Dies ist meine HTML-Struktur.

Um die li in der Mitte enthält auszurichten, gab ich die Eltern-Tabelle-Anzeige und die Inhalte-Tabelle-Zelle anzeigen. Aber es scheint nicht zu funktionieren. Irgendwelche Ratschläge ??

Quelle

2016-07-18 Himakar Reddy

prüfen diese Frage bereits gefragt wurde: http://stackoverflow.com/questions/35513485/how-to-make-contents-vertical-align-inside-div –

Hallo, überprüfen Sie das. Sie werden es tun. http://codepen.io/syedrafeeq/pen/aLEqI –

Mögliches Duplikat von [Wie wird ein Div vertikal für alle Browser zentriert?] (http://stackoverflow.com/questions/396145/how-to-vertical-center-) a-div-für-alle-Browser) – ConfusedShark

.box { 
     background: #ff6a00; 
     margin: 10px; 
     height: 200px; 
     width: 200px; 
    } 

    li { 
     list-style: none; 
     display: inline; 
     text-align: center; 
    } 

    .lis { 
     height: 100vh; 
     width: 100%; 
    } 
    .box{ 
     height: 200px; 
    } 

    .box a { 
     display: block; 
     position: relative; 
     top: 50%; 
     transform: translateY(-50%); 
    }

Quelle

2016-07-18 10:54:16 Pranjal

.box { 
 
    background:#ff6a00; 
 
    white-space: nowrap; 
 
    vertical-align: top; 
 
    margin:10px; 
 
    height:200px; 
 
    width:200px; 
 
} 
 
.list-inline .box:before { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    margin: 0 0 0 -5px; 
 
    overflow: hidden; 
 
    height: 100%; 
 
    content: ''; 
 
    width: 1px; 
 
} 
 

 
li { 
 
    list-style:none; 
 
    display:inline; 
 
    text-align:center; 
 
} 
 
.lis { 
 
    height:100vh; 
 
    width:100%; 
 
} 
 
.ch { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    white-space: normal; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="jumbotron"> 
 
     <h1>Heading here.</h1> 
 
     <p>Some random text goes here.</p> 
 
    </div> 
 
</div> 
 

 
<div class="parent container text-center"> 
 
    <div class="row child text-center"> 
 
     <ul class="list-inline lis"> 
 
      <li class="box par"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg"/> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
      <li class="box par container"> 
 
       <a href="#" class="ch"> 
 
        <img class="img-responsive" src="https://media-mediatemple.netdna-ssl.com/wp-content/uploads/2008/03/hdr-76.jpg" /> 
 
        <p>Something random again.</p> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

Quelle

2016-07-18 11:03:28

Antwort

Verwandte Themen