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/

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

查看全文

相关阅读:
angular项目中使用jquery的问题
 angular项目中使用Primeng
angular项目中使用angular-material2
angular中使用AMEXIO
angular项目中使用ngSemantic
LeetCode——无重复字符的最长子串
 LeetCode——实现 strStr()
Java split函数
 Java JavaScript 输入输出
 Java Stack，Queue，PriorityQueue，deque相关操作

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