Question

我遇到的情况是灵活方框在我想要的情况下不能在Chrome中运行，但它适用于其他浏览器（除了iOS移动设备）。

我正在努力垂直对齐Chrome中的任何内容，但在其他所有内容中都有效。有什么想法吗？

另外，有没有人知道我可以动态地将div拉伸到div类内容的某个％，这也可以在chrome中使用？

提前致谢。请参阅底部的演示和截图。

HTML

<div class="container">
  <div class="content">
    <h2>Ticket System <span style="color:#339933; font-weight:bold;">Open</span> Customer Ticket List</h2>
    <a class="BlueButton" href="ticket_view_cust_ticket.php">Open Customer Tickets</a>
    <a class="BlueButton" href="ticket_view_cust_ticket_rejected.php">Rejected Customer Tickets</a>
    <div class="centerContent">
      There are currently no open customer tickets
    </div>
  </div>
</div>

CSS

html,body
{
    height: 100vh;
}

body
{
   display: table; 
   margin: 0 auto;
   font-family: Tahoma,Arial,Sans-Serif;
}

.container
{  
  height: 98vh;
  vertical-align: middle;
    width: 70vw;
    min-width:1024px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 1vh;
    display: flex;
    flex-direction: column;
}

.content
{
    background-color: #ff0000;
    flex: auto;
    webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex-shrink: 0;
    -o-flex-shrink: 0;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    padding-top:20px;
    min-height:600px;
}

.centerContent
{
    height: 95%;
    padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

演示 - https://jsfiddle.net/qr2tpgo6/1/

容器屏幕截图 - http://prntscr.com/azp8bk

Firefox - http://prntscr.com/azp4oj

Chrome - http://prntscr.com/azp4hy

Answer 1

您的容器缺少display: flex，因此Flex属性无效。

添加：

.content
{
    background-color: #ff0000;
    flex: auto;
    flex-direction: column;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    padding-top:20px;
    min-height:600px;

    display: flex;             /* new; establish flex container */
    justify-content: center;   /* new; center children vertically */
}

Revised Fiddle

垂直对齐Chrome中的内容

1 个答案: