未知宽度的水平居中全面解析

最新推荐文章于 2023-03-21 11:02:24 发布
最新推荐文章于 2023-03-21 11:02:24 发布
阅读量606 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35414779/article/details/84137141
版权

1.相对浮动

<html>

<head>
<title>我的第一个 HTML 页面</title>
</head>
<style>
.unknow_width_center1 {position:relative; left:50%; float:left;}
</style>
<body>
<ul class="unknow_width_center1">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
  <li><a href="#">10</a></li>
</ul>
</body>


</html>

效果图：
在这里插入图片描述

2.text-align居中

<html>

<head>
<title>我的第一个 HTML 页面</title>
</head>
<style>
.unknow_width_center1 {text-align:center; }
</style>
<body>
<ul class="unknow_width_center1">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
  <li><a href="#">10</a></li>
</ul>
</body>

</html>

给父组件一个text-align让子组件的文字居中，弊端是子组件必须是inline。
效果图：
在这里插入图片描述

3.利用table的属性

<html>

<head>
<title>我的第一个 HTML 页面</title>
</head>
<style>
.unknow_width_center3{margin:0 auto}
.unknow_width_center3 ul {overflow:hidden; *zoom:1}
</style>
<body>
<table class="unknow_width_center3">
<tbody>
<tr>
<td>
<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">8</a></li>
  <li><a href="#">9</a></li>
  <li><a href="#">10</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</body>

</html>

效果图：

在这里插入图片描述
直接设置margin:0 auto就可以实现水平居中

参考未知宽度水平居中

不帅的喆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css自适应宽度 多种方法实现宽度自适应的水平居中
09-25
宽度自适应达到水平居中在网页制作中很常见而且很实用，本文整理搜集了一些实用的自适应宽度的水平居中技巧，感兴趣前端工程师们可以借鉴一下，或许对你有所帮助
未知宽高元素水平垂直居中对齐的四种方式 | 定位 | flex布局 | grid布局 | table-cell
dxy1128的博客
11-03 1302
使用一个父盒子包含一个宽高随意的子元素，使子元素在父元素内水平垂直居中。
css未知宽度水平居中的几种解决方案
seimeii的博客
09-24 610
1.子元素 div{text-align:center} p{display:inline-block} 2.淘宝分页： div{position:relative; left:50%; float:left;} p{position:relative; left:-50%;} 3.利用diplay:table来解决： <div id="box"> <span><div id="inner">11111111111111111111&
实现一个未知宽度的盒子水平居中
斑驳的岁月
05-08 141
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>实现一
CSS——未知宽高元素的水平垂直居中的方法
weixin_52796953的博客
03-21 1273
css中经常会使用到对未知宽高元素实现水平居中的效果，此篇文章总结了常用的几个对未知宽高元素实现水平垂直居中的方法。
子控件：水平居中，垂直居中，水平垂直居中
明耀的博客
05-01 3216
.center { display: flex; justify-content: center; align-items: center; } .horizontal-center { display: flex; justify-content: center; } .vertical-center { display: flex; align-items: ...
CSS解决未知高度的垂直水平居中自适应问题
09-27
今天有人问起，晚上试着写出来，供参考； 以下代码兼容主流浏览器IE... 从最简单的开始………… 一、如何让一个DIV水平居中？ 这个简单不作过多说明！ [code] <style> body { text-align:center} #info{ margin:0
css 水平居中，垂直居中，自适应宽度的代码
09-25
宽度自适应：就是元素的宽度根居里面的内容来变化
CSS 垂直居中、水平居中及流失布局宽高自适应
m0_67403013的博客
03-14 161
CSS 垂直居中、水平居中及流失布局宽高自适应，在工作中，经常遇到某个元素如何居中，因此介绍一种简单的居中方式。同时，也经常遇到，上到下布局，当顶部动态变化时，及高度不固定，但是底部如何动态铺满父元素高度，及100%；左到右布局，当左侧动态变化时，及宽度不固定，但是右侧如何动态铺满父元素宽度，及100%。 一、居中 1.垂直居中 仅需父容器添加样式 .parent { align-items:center; display: -webkit-flex; } 2.水平居中 仅需父容器添加样式 .pa
[CSS布局]-水平居中-学习笔记
Catherine_G的博客
08-19 143
W3.org官方网站： https://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins 参考GitHub项目： https://github.com/Sweet-KK/css-layout wiki： https://www.sweet-kk.top/css-layout/#/ 实例： https://www.sweet-...
水平居中布局解决方案
public class Me的博客
06-03 852
以下方案都是解决父元素、子元素宽度都未定时的水平居中布局 1. inline-block + text-alignHTML部分:<div class="parent"> <div class="son"></div> </div> --------------------------------- CSS部分:div.parent { text-align: center;
水平居中总结
dgf5765的博客
01-18 67
水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。 这里我们又得分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？ 如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center...
两种以上方式实现已知或者未知宽度的垂直水平居中
LuckXinXin的博客
02-15 69
/** 1 **/ .wraper { position: relative; .box { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; } } /** 2 **/ .wraper { position: relative; .box { position: absolute;
未知宽度情况下的水平居中、垂直居中、水平垂直居中一些方法
m0_51622088的博客
12-22 152
未知宽度情况下的水平居中、垂直居中、水平垂直居中常用方案
设置未知宽高元素水平垂直都居中的几种方法
qq_59541478的博客
09-01 1808
设置盒子或者元素水平垂直居中是在面试中有可能遇到的问题，本文介绍了几种设置方法
未知宽度水平居中的几种方法
weixin_30305735的博客
07-03 98
在某些特定的场合，在没有知道宽度的情况下却要求水平居中，前段时间在写分页的时候碰到了这个问题。当时在网上找了一些解决方法，并选了一个最合适的方法，现将当时整理的一些方法发出。下列以分页作为演示说明： 方案一、利用浮动的包裹性和相对定位百分比数据值特性,传说称之为“相对浮动” .unknow_width_center1 {position:relative; left:50%; float:le...
实现已知或者未知宽度的垂直水平居中的四种方法
rmkloveme
11-19 912
方法一：实现已知宽度的垂直水平居中 // 1 .wraper {   position: relative;   .box {     position: absolute;     top: 50%;     left: 50%;     width: 100px;     height: 100px;     margin: -50px 0 0 -50px;   } } 方法二：实现未...
html 中 div不定宽度如何水平居中的解决方案
热门推荐
走错路的程序员
01-05 1万+
传统的水平居中样式 margin: 0 auto; 这个方法要求使用这个样式的dom元素,必须同时定义宽度width. 如果dom元素内容是不固定的,那么就无法定义宽度.所以这个地方就很难弄. 经过多次摸索终于找到解决方案. 经过测试发现兼容性还行. .SecondMenuBody{ display: table; /*重点就是这个属性,这个样式会告知浏览器当前元素的宽度,
Bootstrap 3 模态框自定义宽度后 无法水平居中
最新发布
05-22
如果您在 Bootstrap 3 模态框中自定义了宽度，但是发现无法水平居中，您可以尝试以下解决方法： 1. 将模态框的左右 margin 设置为 auto： ``` .modal-dialog { margin: 0 auto; } ``` 2. 将模态框的 display ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值