多个div如何垂直居中-CSDN论坛

多个div如何垂直居中

Web 开发 > HTML(CSS)

收藏回复

[问题点数：40分，结帖人zzxzzxhao]

⋅有点迷茫，有没大佬解答一下 ⋅video.js如何处理swf视频来源 ⋅java如何获取m3u8地址 更多帖子 关注私信空间博客 一点点前进的小郑 等级 本版专家分：0 结帖率 100%



<ul>

    <li>

        <div>明星</div>

        <div >股票</div>

        <div >持股时长</div>

        <div>累计涨幅</div>

    </li>



<li>

        <div>明星</div>

        <div >股票</div>

        <div >持股时长</div>

        <div>累计涨幅</div>

    </li>



<li>

        <div>明星</div>

        <div >股票</div>

        <div >持股时长</div>

        <div>累计涨幅</div>

    </li>

</ul>

如何把上述代码中，每一个li里的div在一排显示，最重要的是水平并且垂直居中！！
已经设置为float：left了，而且条件是，父节点li设置的width是按照百分比设置的，所以大家不要通过固定高宽来设置居中对齐。。

2017-08-15 13:22:18

点赞只看楼主引用举报楼主收起

展开阅读全文

⋅ConnectionRefusedError: [WinError 10061] 由于目标计算机积极拒绝，无法连接。 ⋅怎么让程序自动重新运行 ⋅这个正则，^$为什么在中间，表示什么含义 更多帖子 关注私信空间博客 hongmei85 等级 本版专家分：23356 勋章 银牌 2017年8月总版技术专家分月排行榜第二 红花 2017年10月 PHP大版内专家分月排行榜第一 2017年9月 PHP大版内专家分月排行榜第一 2017年8月 PHP大版内专家分月排行榜第一 黄花 2017年11月 PHP大版内专家分月排行榜第二 2017年9月其他数据库开发大版内专家分月排行榜第二 2011年5月 Web 开发大版内专家分月排行榜第二 2011年4月 Web 开发大版内专家分月排行榜第二 蓝花 2017年9月 Web 开发大版内专家分月排行榜第三 2017年8月其他数据库开发大版内专家分月排行榜第三 2017年8月 Web 开发大版内专家分月排行榜第三 2011年3月 Web 开发大版内专家分月排行榜第三 2011年2月 Web 开发大版内专家分月排行榜第三: 设为float：left的是什么标签？

2017-08-15 13:27:41

点赞只看TA 引用举报 #1得分 20

⋅有点迷茫，有没大佬解答一下 ⋅video.js如何处理swf视频来源 ⋅java如何获取m3u8地址 更多帖子 关注私信空间博客 一点点前进的小郑 等级 本版专家分：0: 引用 1 楼 hongmei85 的回复:
设为float：left的是什么标签？
每个div啊，position: relative;然后float：left，让他们并排了，就是居中不知道怎么搞

2017-08-15 13:35:18

点赞只看TA 引用举报 #2得分 0

⋅面试问题，合格的面试官？ ⋅关于前端的版本控制和管理 ⋅中英文网站是做语言包？还是做好复制一份再翻译？ 更多帖子 关注私信空间博客 zpjshiwo77 等级 本版专家分：4696: 两种方法：
top：50%； left：50%；-webkit-transform: translate(-50%, -50%);

第二种：
http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp

2017-08-15 13:35:18

点赞只看TA 引用举报 #3得分 10

⋅有点迷茫，有没大佬解答一下 ⋅video.js如何处理swf视频来源 ⋅java如何获取m3u8地址 更多帖子 关注私信空间博客 一点点前进的小郑 等级 本版专家分：0: 引用 3 楼 zpjshiwo77 的回复:
两种方法：
top：50%； left：50%；-webkit-transform: translate(-50%, -50%);

第二种：
http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp
是在div里设置吗？我试试

2017-08-15 13:36:18

点赞只看TA 引用举报 #4得分 0

⋅面试问题，合格的面试官？ ⋅关于前端的版本控制和管理 ⋅中英文网站是做语言包？还是做好复制一份再翻译？ 更多帖子 关注私信空间博客 zpjshiwo77 等级 本版专家分：4696: 引用 4 楼 zzxzzxhao 的回复:

你要先看看为什么这么用，怎么用，然后在用，别直接粘贴代码~

2017-08-15 13:37:34

点赞只看TA 引用举报 #5得分 20

⋅有点迷茫，有没大佬解答一下 ⋅video.js如何处理swf视频来源 ⋅java如何获取m3u8地址 更多帖子 关注私信空间博客 一点点前进的小郑 等级 本版专家分：0: 引用 5 楼 zpjshiwo77 的回复:
Quote: 引用 4 楼 zzxzzxhao 的回复:

你要先看看为什么这么用，怎么用，然后在用，别直接粘贴代码~

我把我做的截图给你看，就是每个div都有东西在里面，但是没办法实现水平对齐，我刚试了下，用vertical-align: middle这个，但是没有任何改变

2017-08-15 14:05:15

点赞只看TA 引用举报 #6得分 0

⋅有点迷茫，有没大佬解答一下 ⋅video.js如何处理swf视频来源 ⋅java如何获取m3u8地址 更多帖子 关注私信空间博客 一点点前进的小郑 等级 本版专家分：0

我在多个div前面加了个div，加上css如下



display:-webkit-flex;

display: flex;

-webkit-align-items:center;

align-items:center;

-webkit-justify-content: center;

justify-content: center;

是的，我用来flexbox布局解决了一切！

2017-08-15 14:59:37

点赞只看TA 引用举报 #7得分 0

收起

收藏回复

一点点前进的小郑

等级：

关注私信 TA的帖子

经典面试题：如何让DIV水平和垂直居中: CSS让DIV水平居中 ... 让一个DIV水平居中，直接用CSS就可以...只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。 .mydiv{ margin:0 auto; width:300px; height:200px; }

如何将一个div水平垂直居中？6种方法做推荐: 如何将一个div水平垂直居中？6种方法做推荐欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格...

多个div如何水平垂直居中: 多个div如何水平垂直居中 在它们的父级div 上写入如下 css -webkit-display: flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-...

一个div中多个元素垂直居中的一种解决办法: 有多个元素需要垂直居中排列时，尝试了很多方法，总结一下觉得用flex的布局是最方便的。目标实现： <div id="findclass" class="flexbox"> <div> &lt...

如何让DIV相对于body水平和垂直居中: 我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让...

文本文字在DIV中垂直水平居中显示: 我们都知道有这么一个属性可以让图片，文本等在元素中垂直居中 vertical-align:middle; vertical-align值有很多，常用的就是middle，bottom，text-bottom等，我们先说middle。 vertical-align时而没效果 ...

实现子div在父div中垂直居中: 1、改变布局流，此时水平方向居中失效 *{ margin:0; padding:0; } .father{ width:100%; height:200px; background-color: brown; writing-mode: vertical-lr; } .child{ ...

css 样式两个button 在一个较大的div中在水平方向和垂直方向都居中: 水平居中：设置div的css样式为： text-align: center; 垂直居中：设置div的css样式为： display:flex; justify-content:center; align-items:center; 忘记从哪看到的了，大家将就用吧...

基于flex布局的多行多个div水平垂直居中: 水平垂直一直是一个经典的问题，最近写一个页面样式的时候遇到了这个问题，这次需要水平垂直居中的是多行多个div区块，代码如下：<div class="content" > <div class="chart"></div> <div class="chart"></div> ...

如何让DIV水平和垂直居中三种方法: 方法1 CSS实现水平和垂直居中要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别...

小div在大div里面水平垂直都居中的实现方法: 关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种，下面仅列举了常用的几种。首先看一下要实现的效果图及对应的html代码： div class="parent"> div class="child"> div> div>...

css3 flex布局的使用图片文字垂直居中排列图文混排垂直居中 display:flex: 在实际工作的过程中经常遇到图片文字的混排，需要图片与一段文字垂直居中，这个实现方法以前一直非常复杂，而flex是解决这个问题比较好的办法； css代码 display:flex; flex的是Flexible的缩写，意为弹性。可以...

如何让浮动的子DIV在父DIV上居中(水平方向和垂直方向): 如题：如何让浮动的子DIV在父DIV上居中(水平方向和垂直方向)

DIV和SPAN垂直居中对齐: 水平居中很简单，设置text-align:center就可以了，但是垂直居中一直都不得其解！以前总是尝试着调padding-top,但是有的时候好使，更多的时候不行，今天同样，当height值不大时，增加padding-top就会增加了...

实现垂直居中的几种方式: 方式一：单行文本垂直居中 其实单行文本垂直居中是垂直居中中最为简单的了。通常使用line-height 和 height配合使用即可，也就是将line-height和height设置为同样的数值。当然也有道友说其实这个地方设置height值...

让div在body中水平和垂直居中: 我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让...

将一个div水平垂直居中的6种方法: 方案一： ...div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，兼容性：,IE7及之前版本不支持 div{ width: 200px; height: 200px; background: green; position:absolute; left...

子div在父div垂直居中的最好方法: 此处注明一个以前我一直以为可以垂直居中的使用方法，其实是错误的，如果不信，可以自己自行试一遍就知道了。下面是详细的错误方法父div设vertical-align:middle;还要设line-height 子div设display:...

简单理解css中的垂直居中和水平居中，即vertical-align和text-align属性: 如何实现父元素内部元素的垂直居中与水平居中，vertical-align和text-align的简单实用方法

CSS flex样式垂直居中: 如果要做垂直居中，就需要计算div控件的高度，如果内容变多或者变少，又会导致定位不准确，因此，最稳妥的办法就是让浏览器自己去根据div的高度居中显示 flex 个人理解作用自身的样式 flex-direction属性决定主轴...

多个div垂直居中横向排列: 自适应 多个div垂直居中横向排列父级div，子级div高度都为自适应。 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&...

Web前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）?: 这道题目的提问比较多，连续问了三个问题，正常元素、绝对定位元素、互动元素如何居中，而且居中没有说清楚是垂直居中还是水平居中，要回答清楚这个问题，必须得有深厚的功底，而且要分类的来回答，条理要清楚。...

简单方便实现img在div内垂直居中: 想要将img在div内实现垂直居中的话可以使用display：table-cell；+ vertical-align：middle；就可以了。如果使用父元素行高的话，实现的垂直居中会导致img的底部在容器的中线上而已，如下：正确的做法如下： ...

css实现div水平，垂直居中(两种方法): div的垂直水平居中应该是很常见的问题了，网上的方法也很多~总之就是要实现下图这个效果：我们慢慢来，先看看实现这个效果真正的难点（坑）在哪里~先不说具体的实现，很多人应该都熟悉margin：0 auto这个“...

p标签在div中垂直居中且文本左对齐: 父元素div设置： text-align: center; p元素设置： display: inline-block; vertical-align: middle; text-align: left

多个a标签如何在div中水平居中: 那么如何让多个a标签水平居中呢？方法：在div中设置text-align: center; 使文字居中就可以了。拓展1 可以给a标签设置padding值进行来设置宽度高度，一般不会给a标签设置具体的宽度和高度。拓展2 做导航时，要...

如何让div中的内容垂直居中: 虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大...如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器

多个div水平排列并且居中: 下面这种方法有两个关键点text-align: center;display: inline-block;具体的代码在下面：<style type="text/css"> #div1{text-align: center;width: 800px;height: 40px;} .div2{display:...

HTML中元素居中方法: 之前我们就总结过很多剧中的方法，但是时间长不用，就会慢慢遗忘，所以我们从头来复习一次，变想边敲代码……文本居中height + line-height：两者配合使用，垂直方向居中 text-align：父级的text-align，水平方向...

字体垂直居中的几种实现方法: 这几天遇到了好多关于字体垂直居中的问题，整理一下，希望对大家也有帮助。vertical-align：middle vertical-align 用来指定行内元素（inline）和行内块级元素（inline-block）或表格单元格（table-cell）元素的...

相关热词 c#调用java程序疯狂c# c#多线程处理文本 c# 处理二进制数据类型 c# 如何写文件 c#如何判断程序已打开 c# 标题大小 c# socket 网卡 c#操作sql c#遍历tree