开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在FF，IE6和IE7中运行的HTML中垂直和水平居中的实用解决方案

在FF，IE6和IE7中运行的HTML中垂直和水平居中的实用解决方案：

在不同的浏览器和版本中，实现垂直和水平居中的方法可能会有所不同。以下是一个在FF，IE6和IE7中运行的HTML中垂直和水平居中的实用解决方案：

<!DOCTYPE html>
<html>
<head><style>
  .container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 100px;
    margin-top: -50px;
    margin-left: -100px;
    text-align: center;
  }
</style>
</head>
<body>
  <div class="container">
    <p>居中文本</p>
  </div>
</body>
</html>

这个方法使用绝对定位和负边距来实现垂直和水平居中。top: 50%和left: 50%将容器的左上角放在页面的中心，然后使用margin-top: -50px和margin-left: -100px将容器的中心与页面的中心对齐。text-align: center用于水平居中文本。

这个方法在FF，IE6和IE7中都能正常工作，但在更新的浏览器中，您可能需要使用不同的方法来实现垂直和水平居中。

相关搜索:垂直和水平居中，同时遵守flexbox的html规则 DIV中的垂直和水平对齐 “Antd”库中的组件垂直和水平居中不起作用如何在div中居中(包括垂直和水平)并剪切多余的图像？使用css/html模拟图像中的垂直和水平页眉在页面上垂直和水平居中<div>的最佳方法是什么？如何使UIButton中的文本在垂直和水平方向上都绝对居中响应式浮动中的垂直和水平中心 Bootstrap中的垂直和水平大小调整卡使用flex在垂直和水平居中时从跨度中删除下划线如何在flutter的底部导航栏中添加一个垂直和水平居中的按钮？如何确保在PostScript中垂直和水平方向的线宽相同？如何使不同大小的字体在html跨度中垂直居中？在Xamarin中，mac和iOS平台的输入控件中的文本未垂直居中设置如何使文本在div中垂直和水平居中，同时在图片周围流动，图片的大小可能不同向Adding中的DT表添加垂直和水平滚动条如何用matlab计算物体中的垂直线和水平线？如何在网页中同时进行垂直和水平的鼠标滚轮滚动？如何在Python3x中设置列表的垂直和水平格式？在Compose中居中包含宽度和高度的TextView中的文本

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭