Vertikale und horizontale Ausrichtung in einem DIV

Question

Ich habe ein DIV mit einem BG-Bild, und ich möchte nur zwei Absätze vertikal und horizontal innerhalb dieser DIV zentrieren. Hier ist der Code:

Code:

#dark-table-carol { 
 
    background-color: #2e2e2e; 
 
    width: 100%; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    padding-left: 40px; 
 
    padding-right: 40px; 
 
    text-align: left; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
    background-image: url(http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/carol-candy-carts-quote.jpg); 
 
    height: 600px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    margin: auto; 
 
    /* 
 
    position: absolute; 
 
    background-size:contain; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    */ 
 
}

<div id="dark-table-carol"> 
 
    <h3 id="dark-table-head-style" align="center">"It was like Scott reached into my head and saw exactly what I wanted to achieve. He brought my ideas to life very quickly!</h3> 
 
    <p id="dark-table-paragraph" align="center"> 
 
    Carol Davies - Carol's Candy Carts 
 
    </p> 
 
</div>

Ich habe ein paar Dinge ausprobiert, offensichtlich vertical-align:middle;, Polsterung zu 50% für Top & unten einstellen, aber kein Glück.

Jeder Rat wäre toll :) Danke! Scott

Answer 1

Sie können Ihrem Bildcontainer die folgenden zwei Stile hinzufügen.

display: table-cell; 
vertical-align: middle; 

https://jsfiddle.net/h3qh9pgu/

Ich habe für eine bessere Lösung als die, die Sie nicht für mich arbeiten Ich habe den ganzen Tag gesucht. Leider kann ich keine Antworten finden. Hoffe das funktioniert für dich. Es funktionierte in der Geige.

Answer 2

Ich bevorzuge bottomleft und right Eigenschaften, Elemente zu zentrieren. Ändern Sie diese Werte, um herauszufinden, wie sie sich verhält. Und denken Sie daran, die Eigenschaften margin und position wie unten gezeigt hinzuzufügen.

#container{ 
 
    position:relative; 
 
    width:300px; 
 
    height:300px; 
 
    border:dotted 1px #33aaff; 
 
} 
 

 
#child{ 
 
    width:50px; 
 
    height:50px; 
 
    background-color:#ff55aa; 
 
    
 
    position: absolute; 
 
    margin:auto; 
 
    top:0; 
 
    left:0; 
 
    bottom:0; 
 
    right:0; 
 
}

<div id="container"> 
 
    <div id="child"></div> 
 
</div>

Answer 3

#dark-table-carol { 
 
    display: table; 
 
    background-color: #2e2e2e; 
 
    width: 100%; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
    padding-left: 40px; 
 
    padding-right: 40px; 
 
    text-align: left; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
    background-image: url(http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/carol-candy-carts-quote.jpg); 
 
    /*background-size:contain; */ 
 
    height: 600px; 
 
    background-repeat: no-repeat; 
 
    background-position: center bottom; 
 
    margin: auto; 
 
    /*position: absolute; 
 
      top: 0; left: 0; bottom: 0; right: 0;*/ 
 
} 
 
.inner { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
}

<div id="dark-table-carol"> 
 
    <div class="inner"> 
 
    <h3 id="dark-table-head-style" align="center">"It was like Scott reached into my head and saw exactly what I wanted to achieve. He brought my ideas to life very quickly!</h3> 
 
    <p id="dark-table-paragraph" align="center"> 
 
     Carol Davies - Carol's Candy Carts 
 
    </p> 
 
    </div>