Question

我使用flexbox垂直居中我的div。它在桌面上工作正常，但不适用于移动设备。它以纵向为中心，但是一旦标题为横向，文本就不再居中并且显示为剪切，用户必须滚动才能阅读全文（请参阅下面的img）

请给我一些如何解决这个问题的建议。谢谢。我试图将溢出隐藏起来，但也没有用。

enter image description here

＆＃13;

.vertical-align {
  height:auto;
  min-height: 100vh;

  /* Make it a flex container */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; 

  /* Align the bootstrap's container vertically */
  -webkit-box-align : center;
  -webkit-align-items : center;
  -moz-box-align : center;
  -ms-flex-align : center;
  align-items : center;

  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
  -webkit-justify-content : center;
  justify-content : center;

  flex-direction: row;

  width:100%;
  text-align: center;

  font-size: 0;
}

/*CONTENT*/
.container-fluid{
  margin:0 auto;
  padding:0;
  /*    padding:50px;

  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  */}
.left-col{
  padding-left:50px;
}
.right-col{
  padding-right:50px;
}
#story_text{
  font-size: 18px; 
}
/*story*/
#story_text{
  text-align:left;

  height:100%;
  padding-left:50px;
  padding-right:50px;
}
#pictures{
  text-align: right;
}

＆＃13;

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="viewport" content="width=device-width, user-scalable=no" />

<body>
    <div class="container-fluid">
      <div class="row vertical-align">
        <div class="col-lg-4 col-md-3 col-sm-2 col-xs-12, left-col"></div>
        <div class="col-lg-4 col-md-6 col-sm-8 col-xs-12" class="content">
          <p id="story_text">
            The Daily Roundup is the anchoring café at The Working Capitol serving the needs of the TWC community, the immediate vicinity and crepe aficionados across the island. Borne out of our desire to create something truly distinct in the café scene in Singapore. Instead of serving typical brunch items, we have consulted with one of the foremost prestigious French chefs in Singapore to perfect our crepe offering.
            <br><br>
            The result is a tightly curated list of classic crepes and spritzers serving a largely unmet need in the market: lighter, healthier options for the increasingly conscious palette.
          </p>
        </div>
        <div class="col-lg-4 col-md-3 col-sm-2 col-xs-12, right-col"></div>
      </div>
    </div>
</body>

＆＃13;

- 编辑

添加了额外的jQuery，以检测flexbox的高度变化

jQuery(document).ready(function(){

    var jQuery(window)      = jQuery(window),
    jQuery(sections)    = jQuery('vertical-align'),
    windowHeight;

    function adjustHeight() {

        // get height of browser window on page load and resize events
        windowHeight = jQuery(window.height());

        // apply windowHeight to each <section>
        jQuery(sections.height(windowHeight));

    }

    jQuery(window.resize(function() {
        adjustHeight();
    }));

    jQuery(window.load(function() {
        adjustHeight();
    }));

});

Answer 1

移动网络套件视图端口存在一些问题，我建议您按如下方式设置重置

html, body {
   width: 100%;
   height: 100%;
   max-height: 100%;
   max-width: 100%;
   border: 0 0 0 0;
   padding: 0 0 0 0;
}

可能会使 vh 和 vhw 正常工作

- 编辑 -

我认为您错过了一个重要的＆lt; meta＆gt; 标记，请添加以下元数据，之后即使没有100％修复它也能在您的手机中正常使用

<meta name="viewport" content="width=device-width, initial-scale=1">

移动中的垂直居中Div未对齐（使用flexbox）

1 个答案: