列表中间的中心图像，50% 悬垂

【问题标题】：Center image in the middle of list with 50% overhang列表中间的中心图像，50% 悬垂
【发布时间】：2013-12-28 16:11:02
【问题描述】：

我试图让我的图像在我的四个列表项（每侧 2 个）中间居中，但是当试图让它工作时，列表项就在图像下方！我希望图像具有响应性，因此如果页面变小然后说 1000 像素，它将简单地移动到正确的位置（我知道这需要使用不同的媒体屏幕来完成。

注意：我使用的是 CoolKitten One Page 网站框架，因为我不懂 Javascript

Live Demo

JSFiddle

HTML 代码：

<!DOCTYPE HTML>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
    <title>Brand New Club</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <!-- <link rel="stylesheet" href="css/style.min.css" type="text/css" media="screen"> -->
    <!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>

<body>

    <div class="menu">
        <div class="container clearfix">

            <div id="nav" class="grid_9 omega">
                <ul class="navigation">
                    <li data-slide="1">Home</li>
                    <li data-slide="2">About Us</li>
                        <div id="logo">
                            <img src="http://www.brandnewclub.com/images/brand-new-club-logo-final.png">
                        </div>
                    <li data-slide="3">Services</li>
                    <li data-slide="4">Contact</li>
                </ul>
            </div>


        </div>
    </div>


    <div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
        <div class="container clearfix">

            <div id="content" class="grid_7">
                <h1>Top Slide</h1>
                <h2>Get ready to make magic!</h2>
                <p>Remember that this is a BETA version. This is my first framework so if you see any issue please <a href="mailto:jalxob@gmail.com">let me know it</a>. </p>
                <p>Don't forget to follow me!</p>
                <p><a href="https://twitter.com/Jalxob" target="_blank"><img src="images/twitter.png"></a> <a href="http://dribbble.com/jalxob" target="_blank"><img src="images/dribbble.png"></a></p>
            </div>
            <div id="decorative" class="grid_5 omega">
                <img src="images/decorative.png">
            </div>

        </div>
    </div>



    <div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
        <div class="container clearfix">

            <div id="content" class="grid_12">
                <h1>Parallax Scrolling</h1>
                <h2>What you've seen its called parallax scrolling</h2>
            </div>

        </div>
    </div>



    <div class="slide" id="slide3" data-slide="3" data-stellar-background-ratio="0.5">
        <div class="container clearfix">

            <div id="content" class="grid_12">
                <h1>Grid</h1>
                <h2>See how the grid changes when you resize your screen</h2>
            </div>

            <div id="test" class="grid_1">1</div> <div id="test" class="grid_11 omega">11</div>
            <div id="test" class="grid_2">2</div> <div id="test" class="grid_10 omega">10</div>
            <div id="test" class="grid_3">3</div> <div id="test" class="grid_9 omega">9</div>
            <div id="test" class="grid_4">4</div> <div id="test" class="grid_8 omega">8</div>
            <div id="test" class="grid_5">5</div> <div id="test" class="grid_7 omega">7</div>
            <div id="test" class="grid_6">6</div> <div id="test" class="grid_6 omega">6</div>
            <div id="test" class="grid_7">7</div> <div id="test" class="grid_5 omega">5</div>
            <div id="test" class="grid_8">8</div> <div id="test" class="grid_4 omega">4</div>
            <div id="test" class="grid_9">9</div> <div id="test" class="grid_3 omega">3</div>
            <div id="test" class="grid_10">10</div> <div id="test" class="grid_2 omega">2</div>
            <div id="test" class="grid_11">11</div> <div id="test" class="grid_1 omega">1</div>
            <div id="test" class="grid_12">12</div>

        </div>
    </div>



    <div class="slide" id="slide4" data-slide="4" data-stellar-background-ratio="0.5">
        <div class="container clearfix">

            <div id="content" class="grid_12">
                <h1>Credits</h1>
                <h2><a href="http://jalxob.com/cool-kitten" target="_blank">Cool Kitten</a> was made by <a href="http://www.jalxob.com" target="_blank">Jalxob</a>.</h2>
                <p>Don't forget to follow me!</p>
                <p><a href="https://twitter.com/Jalxob" target="_blank"><img src="images/twitter.png"></a> <a href="http://dribbble.com/jalxob" target="_blank"><img src="images/dribbble.png"></a></p>
            </div>

        </div>
    </div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.stellar.min.js"></script>
    <script type="text/javascript" src="js/waypoints.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
    <!-- <script type="text/javascript" src="js/scripts.min.js"></script> -->
</body>
</html>

CSS 代码：

/* Global */

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1em;
    color: #8a8683;
    background-color:#ffffff;
}
img {
    max-width: 100%;
}
a:link {
    color: #f68f67;
    text-decoration: none;
}
a:hover {
    color: #bde2df;
    text-decoration: none;
}
a:visited {
    color: #f68f67;
    text-decoration: none;
}





/* Navigation */

.menu {
    position:fixed;
    top:0px;
    width:100%; 
    height:auto; 
    background-color:#bbb;
    z-index:100;
}
#logo {

    padding: 10px;

}
#logo img {
   width: 300px;
}
#nav {
    text-align: center;
    height: 100px;
    margin: 30px auto;
    min-width: 1100px;
}
.navigation{
    list-style: none;
    text-align: center;
    width: -webkit-fit-content;
       width: -moz-fit-content;
            width: fit-content;
    height: 100px;
    line-height: 200px;
}
.navigation li{
    padding:0 0 0 50px;
    float: left;
    display: inline;
}
.navigation li:hover{
    cursor:pointer;
    color: #a9d3d0;
}

.navigation .active{
    cursor:pointer;
    color: #f68f67;
    font-weight:bold;
}


/* General Slides */ 

.slide{
    background-attachment: fixed;
    width:100%;
    height:auto;
    position: relative;
    padding:140px 0;
}



/* Slide 1 */ 

#slide1{
    background-color:#156;
}
#slide1 h1 {
    font-size: 3.8em;
    letter-spacing: -3px;
    line-height: 0px;
    color:#8a8683;
    font-weight: 700;
}
#slide1 h2 {
    font-size: 2em;
    color: #8a8683;
    line-height: 0px;
    padding-bottom:20px;
    font-weight: 400;
}




/* Slide 2 */ 

#slide2{
    background-image:url('../images/footprints.png');
    background-color:#f68f67;
    color:#ffffff;
}
#slide2 h1 {
    font-size: 3.8em;
    letter-spacing: -3px;
    line-height: 0px;
    color:#ffffff;
    font-weight: 700;
}
#slide2 h2 {
    font-size: 2em;
    color: #ffffff;
    line-height: 0px;
    padding-bottom:20px;
    font-weight: 400;
}




/* Slide 3 */ 

#slide3{
    background-color:#ffffff;
}
#slide3 h1 {
    font-size: 3.8em;
    letter-spacing: -3px;
    line-height: 0px;
    color:#8a8683;
    font-weight: 700;
}
#slide3 h2 {
    font-size: 2em;
    color: #8a8683;
    line-height: 0px;
    padding-bottom:20px;
    font-weight: 400;
}
#test{
    background-color:#bde2df;
    color:#ffffff;
    text-align:center;
    font-size: 2em;
    font-weight: 400;
}




/* Slide 4 */

#slide4{
    background-image:url('../images/sunglasses.png');
    background-color:#8a8683;
    color:#ffffff;
}
#slide4 h1 {
    font-size: 3.8em;
    letter-spacing: -3px;
    line-height: 0px;
    color:#ffffff;
    font-weight: 700;
}
#slide4 h2 {
    font-size: 2em;
    color: #ffffff;
    line-height: 0px;
    padding-bottom:20px;
    font-weight: 400;
}





/* Tablet */
@media screen and (max-width: 1024px) {

#logo {
    width: 100%;
    text-align: center;
}

#nav {
    width:100%;
    text-align:center;
    margin:10px 0;
}

.navigation{
    width: 100%;
    float: center;
    list-style: none;
    margin: 0;
    padding:0;
}

.navigation li{
    float: left;
    width:25%;
    padding:0;
}

.slide{
    background-attachment: fixed;
    width:100%;
    position: relative;
    padding:150px 0;
}

#decorative {
    display:none;
}

#content {
    text-align:center;
    width:100%;
}

#slide1 h1 {
    line-height: 1em;
}
#slide1 h2 {
    line-height: 1em;
}
#slide2 h1 {
    line-height: 1em;
}
#slide2 h2 {
    line-height: 1em;
}
#slide3 h1 {
    line-height: 1em;
}
#slide3 h2 {
    line-height: 1em;
}
#slide4 h1 {
    line-height: 1em;
}
#slide4 h2 {
    line-height: 1em;
}

}




/* Mobile */
@media screen and (max-width: 480px) {

#logo {
    width: 100%;
    text-align: center;
}

#nav {
    width:100%;
    margin:5px 0;
}

.navigation{
    width: 100%;
    float: left;
    list-style: none;
    margin: 0;
    padding:0;
}

.navigation li{
    float: left;
    width:25%;
}

.slide{
    background-attachment: fixed;
    width:100%;
    position: relative;
    padding:150px 0;
}


#slide1 h1 {
    line-height: 1em;
}
#slide1 h2 {
    line-height: 1em;
}
#slide2 h1 {
    line-height: 1em;
}
#slide2 h2 {
    line-height: 1em;
}
#slide3 h1 {
    line-height: 1em;
}
#slide3 h2 {
    line-height: 1em;
}
#slide4 h1 {
    line-height: 1em;
}
#slide4 h2 {
    line-height: 1em;
}


}

任何提示和建议将不胜感激！

提前致谢！

【问题讨论】：

    标签： javascript html css list html-lists


    【解决方案1】：

    我只使用 CSS 而不是表格为你工作。

    我认为最好的方法是拆分列表并给一个float:left 和另一个float:right 的属性。我不得不承认这不是最干净的方式，但它很有效，对我来说这是最重要的。

    JSFiddle

    *注意：这将在更大的屏幕上更好地工作而不是更小，我建议在你的 CSS 中使用 media screen {} 以使其工作*

    希望这会有所帮助！

    【讨论】：

    • 谢谢，我可以看到工作...也谢谢您的建议！
    【解决方案2】：

    在这种情况下，我会选择餐桌。请找一个样本。

     <table width="100%" border="1" style="height:100%; padding:0px; margin:0px;">
    <tr><td>Home</td><td></td><td>About Us</td></tr>
    <tr><td rowspan="1"></td><td style="background:url(deep-forest.jpg) no-repeat; background-size:100%;width:400px;"></td><td rowspan="1"></td></tr>
    <tr><td>Services</td><td></td><td>Contact</td></tr>
    </table>

    图片：

    如有任何更正，请告诉我。

    【讨论】：

      【解决方案3】：

      你可以这样做：

      ＃标识 { 宽度：100%； 文本对齐：居中； 位置：相对； } #logo 形象 { 宽度：300px； 高度：自动； 左边距：-150px； 位置：绝对； 左：50%； }

      Everything is explained here

      【讨论】：

        猜你喜欢
        • 2016-02-03
        • 2017-01-03
        • 1970-01-01
        • 2020-07-20
        • 1970-01-01
        • 2014-02-21
        • 2021-10-11
        • 2021-04-11
        • 2018-09-04
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode