无法让html网页在iPhone屏幕上居中

2j4z5cfb  于 9个月前  发布在  其他
关注(0)|答案(2)|浏览(132)

我做了一个网页,我试图从我的iPhone acccess-代码如下。
我如何在我的iPhone浏览器(safari)中心的表格?此外,我似乎可以滚动到我的手机上的权利,我如何限制页面布局大小,所以这不能发生

<!DOCTYPE html>

<html>

<table>
<tr>
<td>
<a href="javascript:gotoPage(10);"><img src="temp" id="c1" width="300" height="330"></a> 
<br>
<a href="javascript:gotoPage(11);"><img src="temp" id="c2" width="300" height="330"></a> 
<br>
<a href="javascript:gotoPage(12);"><img src="temp" id="c3" width="300" height="330"></a> 
<br>
<a href="javascript:gotoPage(13);"><img src="temp" id="c4" width="300" height="330"></a> 
<br>
<a href="javascript:gotoPage(14);"><img src="temp" id="c5" width="300" height="330"></a> 
<br>
<a href="javascript:gotoPage(15);"><img src="temp" id="c6" width="300" height="330"></a> 
<br>
<a href="javascript:gotoPage(16);"><img src="temp" id="c7" width="300" height="330"></a> 

 </tr>
</table>
<script>
var $scope;
function gotoPage(page) {
    $scope.send({payload: page});
};

(function(scope) {
    $scope = scope;
})(scope);
</script>
</html>

字符串
尝试了上面的代码,但无法使其工作。

zbdgwd5y

zbdgwd5y1#

最小的可复制代码,使您的图像之一的中心。理想情况下,使用<tr>而不是<br>的每一个项目。并 Package 您的内容在一个<td>

<table  width = "100%" height= "100%">
    <tr style="text-align:center">
        <td>
            <a href="javascript:gotoPage(10);"><img src="temp" id="c1" width="300" height="330"></a> 
        </td>
    </tr>
</table>

字符串
至于Scroll,你需要使用动态的高度/宽度,而不是硬编码的值。你可以使用媒体查询/ CSS框架(bootstrap/tailwind)或一些脚本语言。

r1zhe5dt

r1zhe5dt2#

你可以使用css中的margin属性来水平居中表格,使用css中的overflow属性来隐藏hirizumble滚动条。我认为在你的html中添加以下样式会对你有帮助。

<style>
    /* Center the table horizontally */
    table {
        margin: 0 auto;
    }

    /* Restrict the page layout size */
    body {
        max-width: 100%;
        overflow-x: hidden; /* Hide horizontal scrollbar */
    }
</style>

字符串

相关问题