zoukankan html css js c++ java

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

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

©Copyright 蕃薯耀 2021-07-22

https://www.cnblogs.com/fanshuyao/

方式一：使用浮动

<!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://www.cnblogs.com/fanshuyao/

今天越懒，明天要做的事越多。

查看全文

相关阅读:
C# 动态添加用户控件
 临时记载C#中给DataGrid添加甘特图效果
 xp去掉快捷方式上的箭头
 wpf DataGrid的操作
 一路向前的算法
 WPF 解决WebBrowser控件汉字出现乱码的一种方案
 在CentOS 7 上安装 WordExpress
创建Chrome插件
 开始PHP和JAVA
failedtoloadcbsonextension

原文地址：https://www.cnblogs.com/fanshuyao/p/15044959.html