不设置DIV宽度水平居中，div不设置宽度居中

最新推荐文章于 2022-09-06 15:21:13 发布

蕃薯耀

最新推荐文章于 2022-09-06 15:21:13 发布

阅读量294

点赞数 1

分类专栏：蕃薯耀分享 html css 文章标签： div无宽度居中 div居中 div不设置宽度居中不设置DIV宽度水平居中蕃薯耀

本文链接：https://blog.csdn.net/w995223851/article/details/119003591

版权

蕃薯耀分享同时被 3 个专栏收录

409 篇文章 1 订阅

订阅专栏

html

41 篇文章 0 订阅

订阅专栏

css

24 篇文章 0 订阅

订阅专栏

不设置DIV宽度水平居中，div不设置宽度居中

================================

©Copyright 蕃薯耀 2021-07-22

https://blog.csdn.net/w995223851

方式一：使用浮动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>水平居中</title>
</head>

<style>
.wrap{
  float: left;
  position: relative;
  left: 50%;
  border: 1px solid #ddd;
}
.inner{
  position: relative;
  left: -50%;
  border: 1px solid red;
}
</style>
<body>

<div class="wrap">
　　<div class="inner">不设置DIV宽度水平居中，div不设置宽度居中</div>
</div>

</body>
</html>

效果：

方式二：使用text-align: center;结合 inline-block

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
    <title>水平居中-方式二</title>
</head>

<style>
.wrap{
  text-align: center;
  border: 1px solid #ddd;
}
.inner{
  display: inline-block;
  text-align: left;
  border: 1px solid red;
}

</style>
<body>

<div class="wrap">
　　<div class="inner">不设置DIV宽度水平居中，div不设置宽度居中</div>
</div>

</body>
</html>

效果：

（时间宝贵，分享不易，捐赠回馈，^_^）

================================

https://blog.csdn.net/w995223851

蕃薯耀

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
不设置DIV宽度水平居中，div不设置宽度居中

不设置DIV宽度水平居中，div不设置宽度居中================================©Copyright 蕃薯耀 2021-07-22https://www.cnblogs.com/fanshuyao/方式一：使用浮动<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>水平居中&l
复制链接

扫一扫