Question

对于可能会出现的愚蠢问题，我们深表歉意，因为我还不熟悉HTML＆amp; CSS。我想尽可能避免使用Javascript来解决这个问题。

我的问题是“仍在努力”的文字。在各种笔记本电脑/台式机屏幕和Android手机测试中，我没有任何问题，整个文本字段居中。但是在iphone上我假设它以字符串“S”的第一个字母为中心？以下是iphone设备上的示例：

下面是我的HTML和CSS代码，如果有人能指导我正确的方向来排序这个问题我会非常感激。

<!DOCTYPE html>
<html>
<head>
    <title>Elias Malik</title>
    <link rel="stylesheet" href="main.css">
    <link href="tools/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
    <link rel="shortcut icon" href="diamond.ico">
</head>

    <body>
        <div class="bc">
            <h1>Still working on it</h1>
        </div>

<footer class="mainFooter">
        <div class="socialmediaFooter">
            <a href="https://www.facebook.com/elias.malik.7"><img class="focus" src="facebook.png"</img></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://instagram.com/eliasrmalik"><img class="focus" src="instagram.png"</img></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://uk.linkedin.com/in/eliasrmalik"><img class="focus" src="linkedin.png"</img></a> 
        </div>
    </footer>

    </body>
</html>

和

html 
{

background: url("devbc.jpg") no-repeat center center;

min-height:100%;
background-size:cover;
}


body
{

    text-align: center;
min-height:100%;

}

.bc h1
{

    text-align: center;
font-family: "Damion", cursive;
color: white;
font-size: 4.6vmax; 
position: fixed; 
top: 42%;
left: 51%;
transform: translate(-50%, -50%);
    white-space: nowrap;
}


.mainFooter{
width: 100%;
margin: center;
margin: auto;
position: fixed;
bottom: 0;
font-size: 5px;
float: center;
}

img
{

max-height: 10vmax;
max-width: 5vmax;

}

该网站是： https://eliasmalik.com

Answer 1

我不确定它是否会在您的手机上修复它，但是尝试取出左侧：51％和您的.bc h1 css上的转换属性，而是添加宽度：100％

Iphone文本位置问题

1 个答案: