如何垂直居中放置图像在* Opera Mini *中水平放置？

时间：2017-06-09 03:03:34

标签： css flexbox opera

在Opera Mini（v26.0.2254.117551）中测试Android和Opera Mini iOS（v7.0.5.45389）（因为我读过这个浏览器占有很大的市场份额所以它不容忽视） - 什么它弄得一团糟！：
1.我最初使用此代码（除了Opera Mini之外，我测试过的所有其他浏览器都很棒）：https://jsfiddle.net/4dcuaen2/ 

section {
height: calc(100% - (60px + 25px)); }

在Opera Mini中：
一个。标题图像位于右下方，其中一半被切掉 湾背景图像被挤压到1“屏幕顶部 - 如果我删除<section>代码背景图像显示正确。

  1. 所以我调查了flexbox;喜欢它，在任何地方都很有效，但是可以翻转Opera Mini（尽管它声明它得到了支持：http://caniuse.com/#feat=flexbox） 在Opera Mini中：
    一个。标题图像向左推，只显示其中的一部分 - 如果我添加flex-direction：列;图像显示延伸和过去的屏幕（行无效）
    湾Flexbox盒仅占用屏幕宽度和高度的约70％ C。背景图像没有覆盖屏幕的下半部分，而是延伸到Flexbox外侧的一侧

    2. 如果我删除'display：flex;'一切看起来都很棒 - 除了图像当然不是垂直和水平居中。

    这就是我所看到的： This is what I see

    我已经包含了所有其他位（背景图片，页眉和页脚），以确保这些工作也是如此 - 以下是代码：https://fiddle.jshell.net/rkk4g62b/ 还有一个片段：

    /* chrome android to display background-image */
html{
  height:100%;
  min-height:100%;
}

body {
  overflow-x: hidden;
  padding: 50px 20px 0px 20px;/* 50px: for .navbar-fixed-top.*/
  font-family: 'Didact Gothic', sans-serif, calibri, "lucida sans", verdana, arial, monospace;
  font-size: 12px;
/* chrome android to dispaly background-image */
  min-height:100%;
/* .end */
/*keep footer at bottom*/
  height:100%;
  margin:0; /* for footer*/
/* .end*/
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #ffff;
  background-color: #B4A890;
  background-image: url("http://www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg");
  background-position:absolute;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/* RELEVANT CODE TO CENTERING AN IMAGE HORIZONTALLY & VERTICALLY NO MATTER THE SIZE OF THE WINDOW: */
/* for index.htm responsive container as 'section' codes breaks in Opera Mini. This also breaks; even worse */
.box {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.box .row {
    border: 1px dotted grey;
}

.box .row.header {
    flex: 0 1 auto;
/* shorthand for:
    flex-grow: 0,
    flex-shrink: 1,
    flex-basis: auto
  */
}

.box .row.content {
    flex: 1 1 auto;
}

.box .row.footer {
    flex: 0 1 40px;
}

/* Center title image on index.htm*/
.row.content {
    border: 1px solid red;  /* visual for testing */

    display: -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6, older Androids */
    display: -moz-box;      /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;   /* MID - IE 10 */
    display: -webkit-flex;  /* NEW - Chrome */
    display: flex; /*breaks in opera mini, including: display: inline-flex; *//* NEW, Spec - Opera 12.1, Firefox 20+ */
/* flex-direction: column; with this it displays the image but stretches it past the box and out of size Opera mini only*/
/* flex-direction: row; this made no changes */

    -webkit-flex-align: center;  /* OLD… */
    -moz-box-align: center;      /* OLD… */
    -webkit-box-align: center;   /* OLD… */
    -ms-flex-align: center;      /* OLD… */
    -webkit-align-items: center; /* OLD… */
    align-items: center; /* align vertical */


    -webkit-box-pack: center; -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center; /* align horizontal */
}
/* .END OF RELEVANT CODE */

/* resize images as windows shrinks */
img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

#footer {
  width:100%;
  min-height:70px; /*for footer background fix*/
  bottom:0;
  left:0;
  font-size: 13px;
/* Container border for visual testing*/
  border: 1px solid blue;
}
.foot {
  padding: 10px 0;
  text-align: center;
  color: #ffffff;
  font-size:13px;
  letter-spacing: 2px;
}
    <!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>CENTER Test Opera Mini</title>	
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">	
    <link href="css/flexbox_center.css" rel="stylesheet">
</head>

<body>
<div class="box">
    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Logo and responsive toggle -->
            <div class="navbar-header"> <!--This div creates a navigation button visible on smaller screens -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span><!--These tags create the standard 3-line button logo on top right corner -->
                    <span class="icon-bar"></span><!--Put the page less than full-screen to see this behavior -->
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1<span class="caret"></span></a><!--Requires the JavaScript files linked at the end-->
                        <ul class="dropdown-menu">
                            <li><a href="#">Item1</a></li>
                            <li><a href="#">Item2</a></li>
                            <li><a href="#">Item3</a></li>
                        </ul>
                    </li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown2<span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">AnotherItem</a></li>
                            <li role="separator" class="divider"></li>
                            <li class="dropdown-header">Header:</li>
                            <li><a href="#">MoreItems</a></li>
                            <li><a href="#">MoreItems</a></li>
                            <li><a href="#">MoreItems</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Tutorials</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
<!-- /.navigation -->

<!-- screen reader 'alt' substitute for background images -->
<div id="image" role="img" aria-label="description"></div>

  <div class="row content">
<img src="http://oi64.tinypic.com/k3sz9x.jpg" width="840" height="166">
  </div><!-- /.row content -->


  <div class="row footer">
		<center>
<TABLE BORDER=0><TR id="sl">
<TD><a href="#" target="_blank" class="tm-social-link"><i class="fa fa-1x fa-facebook"></i>FB</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</TD>
<TD><a href="#" target="_blank" class="tm-social-link"><i class="fa fa-1x fa-youtube"></i>YT</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</TD>
<TD><a href="#"<span class="st_sharethis_custom" st_via="XXX" st_msg="#XXX"><i class="fa fa-1x fa-share-alt"></i>SH</a></span></TD>
</TR></TABLE>
</center>
<div class="foot">FOOTER TEXT</div><!--class foot-->
  </div><!-- /.row footer-->
</div><!-- /.box-->

<!-- MenuBar - jQuery & JavaScript are required for the dropdown menu. Placed at the end of the document so the pages load faster -->
<script src="http://m.uploadedit.com/ba3s/1492400858966.txt" type="text/javascript"></script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
<!-- Bootstrap core JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>


</body>
</html>

    谢谢。

    编辑：如果无法做到这一点，是否有代码可以检测Opera Mini并运行不同的代码 - 比如<center>？

0 个答案:

没有答案
相关问题
最新问题