个人中心
gpt4 book ai didi

javascript - 无法在带有链接的页面上将图像居中。我究竟做错了什么？

转载 作者：太空宇宙 更新时间：2023-11-04 09:21:11 27 4
gpt4 key购买 nike

我正在尝试开发一个像下图中的设计一样的页面，但我似乎无法让它发挥作用。图像(笑脸 Logo )没有响应，因为它没有正确缩小到移动设备。 “关于”和“联系”链接也不会直接出现在图片下方。有什么建议吗？

概念图: responsive website design concept

我的 CSS:

/* Global Styles */

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.CenterScreen{
   position:absolute;
   /*element can move on the screen (only screen, not page)*/

   left:50%;top:50%;
   /*set the top left corner of the element on the center of the screen*/

   transform:translate(-50%,-50%);
    /*reposition element center with screen center*/

}


.text-vertical-center {
    display: table-cell;
    text-align: center;  */
    vertical-align: middle;
        margin: 0 auto;
}

.text-vertical-center h1 {
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    font-weight: 700;
}

.text-vertical-center h3 {
    text-align: left;
}



/* Header */

.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: yellow no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;

我的 HTML 代码:

<!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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Smile test</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/ACo.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

    <!-- Header -->
    <header id="top" class="header">
        <div class="text-vertical-center">

                <img src="img/smile.svg" class="CenterScreen" style="display:inline" alt="Smilelogo" width="800" height="800">

            <div class="row">
                <div class="col-sm-4 col-sm-push-5">
                    <h3><a href="#">About</a></h3>
                    <h3><a href="#">Contact Us</a></h3>
                </div>                    
            </div>

        </div>
    </header>

完整代码

html,
    body {
        width: 100%;
        height: 100%;
    }

    body {
        font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
    }

    .CenterScreen{
       position:absolute;
       /*element can move on the screen (only screen, not page)*/

       left:50%;top:50%;
       /*set the top left corner of the element on the center of the screen*/

       transform:translate(-50%,-50%);
        /*reposition element center with screen center*/

    }


    .text-vertical-center {
        display: table-cell;
        text-align: center;  */
        vertical-align: middle;
            margin: 0 auto;
    }

    .text-vertical-center h1 {
        margin: 0;
        padding: 0;
        font-size: 4.5em;
        font-weight: 700;
    }

    .text-vertical-center h3 {
        text-align: left;
    }



    /* Header */

    .header {
        display: table;
        position: relative;
        width: 100%;
        height: 100%;
        background: yellow no-repeat center center scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
<!DOCTYPE html>
    <html lang="en">
        <meta name="author" content="">

        <title>Smile test</title>

        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!-- Custom CSS -->
        <link href="css/ACo.css" rel="stylesheet">

        <!-- Custom Fonts -->
        <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->

    </head>

        <!-- Header -->
        <header id="top" class="header">
            <div class="text-vertical-center">

                    <img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg" class="CenterScreen" style="display:inline" alt="Smilelogo" width="300" height="300">

                <div class="row">
                    <div class="col-sm-4 col-sm-push-5">
                        <h3><a href="#">About</a></h3>
                        <h3><a href="#">Contact Us</a></h3>
                    </div>                    
                </div>
                
            </div>
        </header>

最佳答案

对于微笑，使用并修改其起始位置的 margin-top 值

.CenterScreen{
   position:relative;
   width:50%;
   height:50%;
   margin:0 auto;
   margin-top:20%; 
}

和文本使用

.text-vertical-center {
    position:relative;
    width:100%;
    text-align:center; 
}

关于javascript - 无法在带有链接的页面上将图像居中。我究竟做错了什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41481021/

27 4 0
文章推荐： css - Vanilla css 和模块化 css 有什么区别
文章推荐： python - 如何在 wx.Panel 背景上做 dregradê？
文章推荐： python - 使用 reverse() 创建回文列表
文章推荐： html - margin-top 不能正常工作
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com