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

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

转载作者：太空宇宙更新时间：2023-11-04 09:21:11

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

概念图:

我的 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/

文章推荐： css - Vanilla css 和模块化 css 有什么区别

文章推荐： python - 如何在 wx.Panel 背景上做 dregradê？

文章推荐： python - 使用 reverse() 创建回文列表

文章推荐： html - margin-top 不能正常工作

我可以在 Windows 上将 DVD 读取为单个文件吗？
我知道这在 Linux 上是可能的。我尝试使用 open("E:", 0); 和 open("E:\\", 0); 但它返回为 -1。我想将 DVD 作为一个大文件来读取，而不是将其用作文件系统。最
在 Linux 上将 CUDA 代码编译为静态库 (.a)
我正在尝试编译一个包含 CUDA 代码的小型库。我已成功将其编译为共享库，但我真正需要的是静态库。我有两个源文件: main.c:包含一个用C编写的测试函数。我用gcc编译这个文件 mai
c - 在 Linux 上将 * 作为命令行参数传递时的奇怪行为
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 9 年前。 Improve
在 Windows 上将 EXPAT 编译为静态链接的 .a
我正在使用 MingW 在 Windows 上编写 C 程序，并希望使用 EXPAT XML 库。我想静态编译我的程序，所以我需要静态 .a 库。有什么方法可以将 EXPAT 编译成 Windows
android - 如何在 android 上将 WHERE 子句添加到查询
我想将结果限制为 KEY_HOMEID 等于 journalId 的结果。我已经研究了几天，如有任何帮助，我们将不胜感激。 public Cursor fetchAllNotes(String jou
python - 如何在 Mac 上将 Python 完全恢复为出厂设置
我一直在寻找这个信息，但是由于可以通过 homebrew 和 pip 安装额外的包和 python 版本，我感觉我的环境很乱向上。此外，很久以前，我用 sudo pip install 和 sudo
bash - 如何在 Mac 上将 $PATH 更改为默认值？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎不是关于 a specific programming problem, a softwar
Ghostscript:如何在 Windows 上将 PDF 与通配符合并
我正在尝试合并目录中的所有 *.pdf : gswin64c -q -dNOPAUSE -sDEVICE=pdfwrite -sOutputFile=Total_Files.pdf -dBATCH *
html - 在移动 View 上将 div 推到新行
所以我有一个简单的图像缩略图着陆页，例如: 在我的网站上，4 个并排显示在桌面上。如何强制它们在移动设备 View 中成对出现在一行中？所以:桌面: #### 手机: ## ## 最佳答案
python - 如何在 Ubuntu 上将 python3 安装恢复为默认设置
我正在使用 Ubuntu 21.04。我已删除 /usr/bin/python3和 /usr/lib/python3/因为某些软件包在二进制文件中出现错误。我的意思是重新安装python3到一个新的状
在 Windows 上将 googles v8 构建为共享库？
是否可以在 Windows 上使用 gyp 将 googles v8 构建为共享库(msvc 2012)？我试过的一切都不起作用。我试过的: python build\gyp_v8 -Dcompone
rubygems - 在 mac 上将 rubygems 更新到特定版本
我需要将 rubygems 从 1.3.5 更新到 1.4.2 但显然 rubygems update 只是将您更新到最新版本如何更新到 1.4.2？最佳答案您可以使用 RVM 安装特定
iphone - 我可以在 iPhone 上将 NSTask 用于我未分发的应用程序吗？
我还没有找到太多关于它的信息，但我看到了一些提示，表明可以在 iPhone 应用程序中使用 NSTask。如果可能的话，我将如何去做？我不想越狱我的 iPhone，但我正在开发的应用程序仅供内部使用
iphone - 如何在 iPhone 上将 UIWebView 的内容居中
我在 UIWebView 中有一个 map 图像。它默认加载在左上角。我希望它在 UIWebView 的中心初始化。有人知道怎么做吗？谢谢! 最佳答案如果 map 图像是页面中唯一的内容，它是否
kubernetes - 如何在 GCE 上将 NodePort 暴露给互联网
如何公开 NodePort 类型的服务上网没有使用类型 LoadBalancer ?我发现的每个资源都是通过使用负载均衡器来完成的。但我不希望负载平衡对我的用例来说既昂贵又不必要，因为我正在运行 p
java - 在 Android 上将 View 变为可编辑状态
是否可以将 View 变成可编辑的，例如 this image ？我知道我可以使用 GridView 来做到这一点。但是，我正在尝试使用 TableRows 来做到这一点，这可能吗？编辑:我真正想
heroku - 如何在 Heroku 上将 rake 任务作为工作进程运行？
假设我已将 Heroku 应用程序扩展为 1 个工作进程，但如何指定具有特定名称的 rake 任务应作为工作进程运行？最佳答案在你的项目中创建一个 Procfile，然后像这样将 rake 任务放
github - 在 GitHub 上将 Markdown 中的引用链接作为项目符号列表包含在内
目前，我在 GitHub 上一个项目的 README.md 文件中使用此 Markdown 文本: See the docs of [testthat][3] on how to write unit
在 C 上将 IPv4 转换为 IPv6
我正在尝试使用一些到 uint8_t 的转换将 IPv4 转换为 IPv6。我知道 IPv4 有 4 个字节，IPv6 有 2 个字节的 16 个无符号整数，但我找不到它们转换的方法。 #includ
c - 如何在 C 上将 argv[] 输入分离为两个不同的字符串？
我是编程新手，目前正在学习 C。您能帮我解决以下案例吗？一个例子是，如果用户输入“cbamike”，我想将其分成两个字符串:cba 和 mike。我尝试了下面的代码，但它不起作用: #includ

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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