您好，对于可能遇到的愚蠢问题，我深表歉意，因为我对 HTML 和 CSS 还很陌生。如果可能的话，我想避免使用 Javascript 来解决这个问题。
我的问题是文本“仍在处理中”。在测试的各种笔记本电脑/台式机屏幕和安卓手机上，我对它没有任何问题，整个文本字段都居中。但是在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>
<a href="https://instagram.com/eliasrmalik"><img class="focus" src="instagram.png"</img></a>
<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