垂直居中content div div内的父div（宽度以％）

我试图让＃contactboxsplit1（图片中的蓝色div）内的内容以响应方式坐在垂直居中，而不是在它的父div的顶部，但不能弄清楚如何。垂直居中content div div内的父div（宽度以％）

代码&截图张贴如下。预先感谢您的帮助。牛逼

.contactsplitwrapper { 
 
    display: block; 
 
    width: 100%; 
 
    float: left; 
 
    color: #000; 
 
    padding-bottom: 7%; 
 
} 
 

 
.contactsplitwrapper a { 
 
    color: #000; 
 
} 
 

 
.contacttitle { 
 
    display: block; 
 
    width: 100%; 
 
    float: left; 
 
    padding: 3% 0 1% 0; 
 
} 
 

 
.contactboxsplit { 
 
    display: block; 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
#contactboxsplitmain { 
 
    background: #2A06E4; 
 
} 
 

 
#contactboxsplit1 { 
 
    display: block; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    background: #2A06E4; 
 
} 
 

 
#contactboxsplit1 img { 
 
    width: 7%; 
 
    padding-right: 3%; 
 
    height: .1; 
 
} 
 

 
.contactboxhalf { 
 
    width: 49%; 
 
    float: left; 
 
    display: block; 
 
} 
 

 
#contactboxhalf2 { 
 
    border-left: solid 1px #000; 
 
} 
 

 
#contactboxsplit2 { 
 
    background: #F31115; 
 
} 
 

 
#contactboxsplit2 img { 
 
    width: 70%; 
 
    display: block; 
 
}

<div class="contactsplitwrapper" id="#p7"> 
 
    <div class="contacttitle"> 
 
    <header> 
 
     <h2> Where to find us</h2> 
 
    </header> 
 
    </div> 
 
    <div class="contactboxsplit" id="contactboxsplitmain"> 
 
    <div id="contactboxsplit1"> 
 
     <p> 
 
     <h3>For bookings & events please email us at <a href="mailto:[email protected]">[email protected]</a> or please call 0207 407 8226.<br></h3> 
 
     </p> 
 
     <div class="contactboxhalf" id="contactboxhalf1"> 
 
     <h3> 
 
      <a href="http mapslink"> 
 
\t \t \t \t \t 'NINE LIVES'<br> 
 
\t \t \t \t \t BASEMENT<br> 
 
\t \t \t \t \t 8 HOLYROOD STREET<br> 
 
\t \t \t \t \t LONDON <br> 
 
\t \t \t \t \t SE1 2EL<br></p></a> 
 
      <p> 
 
      <img src="img/phone.png" class="phoneicon">0207 407 8226<br> 
 
      <img src="img/mailicon.png">[email protected]<br> 
 
      </p> 
 
     </h3> 
 
     </div> 
 
     <div class="contactboxhalf" id="contactboxhalf2"> 
 
     <h3> 
 
      Opening times<br><br> Mon | Closed.. for now<br> Tue | 5pm - Midnight<br> Wed | 5pm - Midnight<br> Thu | 5pm - Late<br> Fri | 5pm - Late<br> Sat | 5pm - Late<br> Sun | Closed.. for now<br></h3> 
 
     <!-- Left align --> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="contactboxsplit"> 
 
    <div id="contactboxsplit2"> 
 
     <img src="img/location.png"> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-06-26 Tom Lowles

您好，仅有2个提示：1。不要使用'p'标签内的'h3'。 'h3'是一个块元素，应该代表它自己。 2.在你的CSS上使用正确的缩进以获得更好的可读性;）至于你的解决方案：将div和red元素包裹在div中并使用'display：flex;对齐项目：中心;'在包装 – lumio

@ lumio感谢您的建议/帮助。赞美h3/p标签，愚蠢的错误。我试过你的解决方案，将它们包装在div中，并显示：flex; align-items：center;但它不起作用：/ –

请参阅下面的Yodas回应。这实际上应该可行。如果没有，请告诉我们:) – lumio

您可以使用柔性此。通过制作容器display: flex并应用属性

正如你所看到的，我们不需要浮动或其他任何东西。

编辑：出于某种原因堆栈溢出片段渲染不显示此正确0_p

.container { 
 
    height: 500px; 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="container"> 
 
    <div> 
 
    <img src="http://www.placecage.com/200/300"> 
 
    </div> 
 
    <div> 
 
    <img src="http://www.placecage.com/100/100"> 
 
    </div> 
 
</div>

jsfiddle

来源

2017-06-26 14:33:30 Yoda

给容器一个固定的高度。我想问题是，代码片段呈现为默认高度，因为图像尚未加载。 – lumio

好吧，似乎也没有工作：对此感到遗憾 – lumio

垂直居中content div div内的父div（宽度以％）

回答

相关问题