以响应式图像为中心

时间:2017-01-03 18:57:04

标签: javascript html css

我正在尝试创建一个图片库,并使其垂直和水平居中于页面,无论屏幕的大小如何。水平定心并不是一个问题,但我不能让垂直居中工作。

HTML:

<!doctype html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Cardspoiler - Priest</title>
    <meta name="description" content="BlackTie.co - Free Handsome Bootstrap Themes" />
    <meta name="keywords" content="themes, bootstrap, free, templates, bootstrap 3, freebie,">
    <meta property="og:title" content="">

    <link rel="stylesheet" type="text/css" href="../../../Bootstrap/Munter/Theme/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../Bootstrap/Munter/Theme/fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
  <link rel="stylesheet" href="../../../Bootstrap/Munter/Theme/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../../../Bootstrap/Munter/Theme/css/style.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="../../Cardspoiler.css">

</head>

<body>
    <div class="navbar navbar-fixed-top" data-activeslide="1">
        <div class="container-fullwidth">

            <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="Home.html">Cardspoiler</a>
            <div class="nav-collapse collapse navbar-responsive-collapse" >
                <ul class="nav row">
                    <li data-slide="1" class="col-12 col-sm-1"><a id="home" title="Home"><span class="icon icon-home"></span> <span class="text">Home</span></a></li>
                    <li data-slide="2" class="col-12 col-sm-1"><a id="warrior" title="Warrior"><span class="icon icon-filter"></span> <span class="text">Warrior</span></a></li>
                    <li data-slide="3" class="col-12 col-sm-1"><a id="druid" title="Druid"><span class="icon icon-leaf"></span> <span class="text">Druid</span></a></li>
                    <li data-slide="4" class="col-12 col-sm-1"><a id="priest"title="Priest"><span class="icon icon-plus-sign"></span> <span class="text">Priest</span></a></li>
                    <li data-slide="5" class="col-12 col-sm-1"><a id="paladin" title="Paladin"><span class="icon icon-heart"></span> <span class="text">Paladin</span></a></li>
                    <li data-slide="6" class="col-12 col-sm-1"><a id="hunter" title="Hunter"><span class="icon icon-screenshot"></span> <span class="text">Hunter</span></a></li>
          <li data-slide="7" class="col-12 col-sm-1"><a id="mage" title="Mage"><span class="icon icon-fire"></span> <span class="text">Mage</span></a></li>
          <li data-slide="8" class="col-12 col-sm-1"><a id="shaman" title="Shaman"><span class="icon icon-tint"></span> <span class="text">Shaman</span></a></li>
          <li data-slide="9" class="col-12 col-sm-1"><a id="warlock" title="Warlock"><span class="icon icon-user"></span> <span class="text">Warlock</span></a></li>
          <li data-slide="10" class="col-12 col-sm-1"><a id="rogue" htitle="Rogue"><span class="icon icon-eye-close"></span> <span class="text">Rogue</span></a></li>
          <li data-slide="11" class="col-12 col-sm-1"><a id="minions" title="Minions"><span class="icon icon-chevron-up"></span> <span class="text">Minions</span></a></li>
          <li data-slide="12" class="col-12 col-sm-1"><a id="spells" title="Spells"><span class="icon icon-chevron-down"></span> <span class="text">Spells</span></a></li>
                </ul>
                <div class="row">
                    <div class="col-sm-1 active-menu"></div>
                </div>
            </div><!-- /.nav-collapse -->
        </div><!-- /.container -->
    </div><!-- /.navbar -->
  <div class="table-responsive" id="content">
        <div class="custom-container">
                    <a href ="../Cards/1/Pint-Size_Potion.html"><img src="../Cards/1/Pint-Size_Potion.png" width="200"></a>
                        <a href ="../Cards/1/Potion_of_Madness.html"><img src="../Cards/1/Potion_of_Madness.png" width="200"></a>
                        <a href ="../Cards/2/Mana_Geode.html"><img src="../Cards/2/Mana_Geode.png" width="200"></a>
                        <a href ="../Cards/3/Kabal_Courier.html"><img src="../Cards/3/Kabal_Courier.png" width="200"></a>
                        <a href ="../Cards/3/Kabal_Talonpriest.html"><img src="../Cards/3/Kabal_Talonpriest.png" width="200"></a>
                        <a href ="../Cards/4/Greater_Healing_Potion.html"><img src="../Cards/4/Greater_Healing_Potion.png" width="200"></a>
                        <a href ="../Cards/4/Kabal_Chemist.html"><img src="../Cards/4/Kabal_Chemist.png" width="200"></a>
                        <a href ="../Cards/4/Kazakus.html"><img src="../Cards/4/Kazakus.png" width="200"></a>
                        <a href ="../Cards/5/Drakonid_Operative.html"><img src="../Cards/5/Drakonid_Operative.png" width="200"></a>
                        <a href ="../Cards/5/Kabal_Songstealer.html"><img src="../Cards/5/Kabal_Songstealer.png" width="200"></a>
                        <a href ="../Cards/5/Raza_the_Chained.html"><img src="../Cards/5/Raza_the_Chained.png" width="200"></a>
                        <a href ="../Cards/6/Dragonfire_Potion.html"><img src="../Cards/6/Dragonfire_Potion.png" width="200"></a>
  </div>
</div>
<br>
<br><br>
<br><br>
<br>
<br>
<center>
    <footer>
        <div class="footer" id="footer">
                            <div class="col-lg-6">
                                <div align="right">
                                                                                <font color="888888" size="4%">CARDSPOILER.COM</font>
                                                                                    <font color="9B764C" size="3%">
                                                                                    <br>
                                                                                    Freedom to know
                                                                                </font>
                                                                                    <br>
                                                                                    <br>
                                                                                    <font size="2%" color="666666">
                                                                                    We are here to bring you visual, leaked spoilers for all of <br> the cards you love within a simple gallery.
                                                                                    <br>
                                                                                </font>
                                                                                <font color="#333333">
                                                                                        <a href="mailto:help@cardspoiler.com" style="text-decoration:none;color:#9B764C;font-size:70%;">CONTACT US</a>
                                                                                            <a href="../../Privacy_Policy.html" style="text-decoration:none;color:#9B764C;font-size:70%;">PRIVACY POLICY</a>
                                                                                    </font>
                                                                                </div>
                                                                            </div>
                                                                                <div class="col-lg-6">
                                                                                    <div align="left">
                                                                        <font color="#888888" size="2%">
                                                                                <a href="MSoG.html" style="text-decoration: none;color:#888888;">Mean Streets of Gadgetzan</a>
                                                                            </font>
                                                                            <br>

                                                                        <font color="#888888" size="2%">
                                                                                <a href="ONiK.html" style="text-decoration: none;color:#888888;">One Night in Karazhan</a>
                                                                            </font>
                                                                            <br>

                                                                        <font color="#888888" size="2%">
                                                                                <a href="WotOG.html" style="text-decoration: none;color:#888888;">Whispers of the Old Gods</a>
                                                                            </font>
                                                                            <br>

                                                                        <font color="#888888" size="2%">
                                                                                <a href="tLoE.html" style="text-decoration: none;color:#888888;">The League of Explorers</a>
                                                                            </font>
                                                                            <br>

                                                                        <font color="#888888" size="2%">
                                                                                <a href="TGT.html" style="text-decoration: none;color:#888888;">The Grand Tournament</a>
                                                                            </font>
                                                                            <br>

                                                                        <font color="#888888" size="2%">
                                                                                <a href="BrM.html" style="text-decoration: none;color:#888888;">Blackrock Mountain</a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                    </footer>

</body>

    <!-- SCRIPTS -->
    <script src="../../../Bootstrap/Munter/Theme/js/html5shiv.js"></script>
    <script src="../../../Bootstrap/Munter/Theme/js/jquery-1.10.2.min.js"></script>
    <script src="../../../Bootstrap/Munter/Theme/js/jquery-migrate-1.2.1.min.js"></script>
    <script src="../../../Bootstrap/Munter/Theme/js/bootstrap.min.js"></script>
    <script src="../../../Bootstrap/Munter/Theme/js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="../../../Bootstrap/Munter/Theme/fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
    <script src="../../../Bootstrap/Munter/Theme/js/script.js"></script>
    <script src="../../Cardspoiler.js"></script>


</html>

CSS:

<style>
html {
  position: relative;
  min-height: 100%;
}
body {
  background: #232526;
    background: -webkit-linear-gradient(to right, #232526 , #414345);
    background: linear-gradient(to right, #232526 , #414345);
    margin: 0em;
}

a { cursor: pointer; cursor: hand; }


footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 130px;
    background: #e4e6e5;
  background-color: rgba(228,230,229,.9);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
    border-top: solid transparent 5px;
}
#content{
  padding: 50px 0 0 0;
}
#text-content{
    padding: 175px 0 0 0;
}
img{ max-width: 100%; height: 80%; width: auto\\9; /* ie8 */ }

.col-aligncenter{float: none;margin: 0 auto;}
.custom-container {
    padding-left: 100px;
    padding-right: 100px;

}
</style>

JS:

document.getElementById("home").onclick = function () {
  location.href = "Home.html";
};
document.getElementById("warrior").onclick = function () {
location.href = "Warrior.html";
};
document.getElementById("druid").onclick = function () {
location.href = "Druid.html";
};
document.getElementById("priest").onclick = function () {
location.href = "Priest.html";
};
document.getElementById("paladin").onclick = function () {
location.href = "Paladin.html";
};
document.getElementById("hunter").onclick = function () {
location.href = "Hunter.html";
};
document.getElementById("mage").onclick = function () {
location.href = "Mage.html";
};
document.getElementById("shaman").onclick = function () {
location.href = "Shaman.html";
};
document.getElementById("warlock").onclick = function () {
location.href = "Warlock.html";
};
document.getElementById("rogue").onclick = function () {
location.href = "Rogue.html";
};
document.getElementById("minions").onclick = function () {
location.href = "Minions.html";
};
document.getElementById("spells").onclick = function () {
location.href = "Spells.html";
};
$(document).ready(function(e) {
  var lis = $('.nav > li');
  menu_focus( lis[0], 1 );

  $(".fancybox").fancybox({
    padding: 10,
    helpers: {
      overlay: {
        locked: false
      }
    }
  });

});

2 个答案:

答案 0 :(得分:0)

使用margin:0 auto可以轻松解决水平居中问题。另一方面,垂直居中一直很棘手。好消息:Flexbox做了很多事情,其中​​包括水平和垂直居中。

你的代码非常混乱,所以我将简要介绍一下如何使用flexbox。

当flex-direction设置为row(默认值)时,justify-content:center;水平居中,对齐项目:center;垂直居中。

注意:我在包装器上使用100vw和100vh来演示居中。

.gallery img {
  width: 500px;
  height: auto;
}

.wrapper {
  background: #f9f9f9;
  width: 100vw;
  height: 100vh;
}

.gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
<div class="wrapper">
  <div class="gallery">
    <img src="https://assets.entrepreneur.com/content/16x9/822/1413823428-amazingly-free-stock-websites.jpg" />  
  </div>
</div>

答案 1 :(得分:0)

也许尝试使用此代码:

#content {
  position: relative;
  height: 150px;
}

.custom-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 404px;
}