table-cell实现大小不固定元素的垂直居中

WPF学习笔记-FlowDocument实现表格单元格垂直居中以及边框设置 FlowDocument是WPF的高级文档功能(如分页和列)承载流内容和设置流内容格式。其中的块元素Table可以很方便的添加并展示表格,但是其无法实现自动换行,我尝试了网上搜索解决方案以及自己尝试修改。在网上搜索了不同的解决方案,包括手动计算高度,通过Margin属性来实现类似居中的问题,或者尝试在单元格中添加BlockUIContainerl来实现居中,但是实际由于TableCell自身没有居中,或者适应宽度,最终都以失败告终。最终我通过Grid实现了该功能,而且可以跨页自动换行。 阅读详情

代码实例:

<!DOCTYPE html>
<html>
<head>
    <title>测试</title>
    <meta charset="utf-8">
    <style type="text/css">
        .container{
          display: table;
          width: 300px;
          height: 200px;
          background-color: #ddd;
        }
        .container .item{
          display: table-cell;
          vertical-align: middle;
          padding: 0 20px;
        }
    </style>
</head>
<body>
 <div class="container">
    <div class="item">无限长度的元素,此元素长度如果超过设定的width值,会自动换行</div>
 </div>
</body>
</html>

 
 
 

页面展示效果

当item内容很长时,会自动换行,但是在垂直方向上一直保持居中

这里写图片描述

当item内容不够长时,在水平方向上不能保证居中,但是,垂直是居中的:
这里写图片描述



注意几点:

父元素container:

  • 宽高要设定
  • display: table是必须设定的

自元素item:

  • 设定宽度是无效,内容足够长时在水平上他会撑满父容器宽度;内容不够长时,靠左排列;
  • 在设定display: table-cell的同时,一定需要设置:vertical-align:middle
  • 设置margin值也是无效的,只能设置padding值
不固定宽高元素水平垂直居中 背景: 本文主要讲述不用flex布局和grid布局时如何设置不定高宽元素的水平垂直居中,这是很多时候经常遇到的问题。 页面结构 &lt;div class="box"&gt; &lt;div class="content"&gt;&lt;span&gt;hell&lt;/span&gt;&lt;br/&gt;ssssssss&lt;br/&gt;shshsh 阅读详情

相关推荐

解决Layui 表格自适应高度的问题

鄙人在写一个项目,发现成功将数据在页面显示后, 高度没有自适应,而是将一些按钮遮挡了,不断的调试和网上寻找解决办法,发现没有效果,最后添加了一句css  <style> .layui-table-cell{ display:table-cell; vertical-align: middle; } </style> 成功解决问题,不要在field中添加高度,可以自行设置宽度,这样就可以让表格自适应高度了~! 以上这篇解决Layui 表格自适应高度的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

在FlowDocument中设置TableCell垂直居中遇到的问题

最近在程序中用到了WPF中的FlowDocument生成一个文档,其中有对System.Windows.Documents.Table的使用,在使用的过程中发现这家伙居然不支持设置垂直居中。一个程序,内部逻辑是里子,外部显示是面子,而boss显然是既要里子更要面子,于是折腾开始。 先对着MSDN撸,无果。接着满世界问问题,在stackoverflow上提问题,有人给了个线索,这个针对一个Tab

围炉夜话 3864

nRF52811墨水屏时钟DIY:从全刷到局刷的实战改造指南(附完整代码)

本文详细介绍了如何将基于nRF52811的墨水屏时钟从耗电的全屏刷新模式改造为高效的局部刷新模式。通过剖析全刷与局刷的原理差异,提供了从工程架构、驱动层适配到应用层逻辑重构的完整实战指南,并附上关键代码示例。改造后,设备功耗显著降低,续航大幅提升,同时解决了视觉闪烁问题,是DIY低功耗墨水屏应用的实用参考。

weixin_29194693的博客 355

CSS笔记——表格元素table单元格合并和妙用(利用table-cell实现块级、多行文本元素水平垂直居中)、表单元素form

HTML中,表格由 table 元素来定义.还有一些用于表格的其他标签,如 caption、thead、tbody、tfoot、th 等。是用于收集用户信息的一组元素。formnovalidate: 定义提交表单数据时是否要忽略表单元素的验证。定义表单元素的值,例如文本框中的默认文本、默认选中的单选框或复选框等。表单元素只读,用户无法修改其值,通常用于展示数据或只读状态的表单元素。禁用表单元素,使其无法接收用户输入,通常用于表单元素不可用的情况。:表单的容器(表单域),用于将表单元素组织在一起。

bqiuer的博客 6702

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)

软件测试 | 手把手教你如何使用 Charles 抓包工具(电脑+手机端)一、Charles简介二、Charles下载与安装三、Charles配置(1)Charles-PC端的配置如下:(2)过滤网络请求:(3)Charles抓取HTTPS请求包前置条件:(4)Charles抓取HTTPS双向认证包:关注我,免费领取学习资料 嘿。大家好,我是4U: 做过 APP 测试的同学都会接触抓包工具,通过抓包工具可以获取到客户端与服务端接口的交互数据,在实际测试APP的过程中,我们往往会发现服务端返回 的参数字段错

leboxy的博客 4153

阻抗匹配与史密斯(Smith)圆图

在找到点B和B'后,我们就能够测量A'到B和B'到D的弧长,前者就是C的归一化电纳值,后者为L的归一化电抗值。当然,表面上看新的点好像是一个不同的阻抗,实际上Z和1/Y表示的是同一个元件(这个新值在圆图上呈现为一个不同的点,而且反射系数也不相同,依次类推)。出现这种情况的原因是我们的图形本身是一个阻抗图,而新的点代表的是一个导纳。这个方程是在复平面(Γr, Γi)上、圆的参数方程(x - a)² + (y - b)² = R²,它以[r/(r + 1), 0]为圆心,半径为1/(1 + r)。

qq_55759599的博客 3962

[CSS] css中display: table-cell 实现垂直居中

display:table-cell;会使元素表现的类似一个表格中的单元格td,利用这个特性可以实现文字的垂直居中效果 设置了display:cell;后,vertical-align:middle使文字内容垂直居中 例如以下用法 height: 100px; display: table-cell; vertical-a...

程序员老狼专注开发aigc或客服系统应用 755

Vivado IP核:AXI Uartlite的使用经验分享

1. IP基本设置 在Vivado中,打开IP Catalog,搜索“uart”: 双击“AXI Uartlite”,进入IP配置界面: 这里可以配置IP的具体参数,设置时钟频率、波特率等,完成后,生成IP即可。 2. IP的时序特点 点击下面的链接可以下载该IP核的官方指导文档: https://china.xilinx.com/support/documentation/ip_docume...

weixin_43265132的博客 1万+

table-cell设置垂直居中

<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-eq...

moonla3的博客 1946

uniapp+google map不显示

uniapp+renderJS+google map开发安卓版APP非小程序,google map小叉号不显示,google map自定义marker右上角的小叉号如何去掉,uniapp+google map不显示

renkai721的专栏 527

Android 12.0 framework系统修改安兔兔等显示的屏幕尺寸大小功能实现

在12.0的系统rom定制化开发中,在使用第三方app检测系统的一些信息中,比如安兔兔 设备信息等检测app中,有时候显示的屏幕尺寸大小和 产品规格书等信息不同,稍微有些差异,所以就需要看下系统framework层中,相关的设备信息是怎么读出来的,然后做些调整 接下来就来分析相关功能

安卓兼职framework和app工程师的博客 477

一、display:table-cell属性简述

一、display:table-cell属性简述display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用。我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以displa

IT技术宅-北方的刀郎 889

【SigmaStudio】自定义算法组件之XML编写规范(一)

SigmaStudio生成自定义算法组件时,需要XML和DLB文件,本文主要记录XML文件的编码规范

liang_song的博客 1140

display:table有哪些应用?

这里是修真院web小课堂,每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解web知识/技能,本篇分享的是: 【display:table有哪些应用?】 大家好,我是IT修真院武汉分院第九期的学员杨梓雄,一枚正直纯洁善良的前端程序员,今天给大家分享一下,修真院官网前端工程师(职业)css任务06,深度思考中的知...

IT修真院:初学者转行到互联网的聚集地 4376

LPDDR5 学习笔记05:WCK操作详解

LPDDR5 SDRAM采用双时钟设计,写时钟(WCK)频率为命令时钟(CK)的2倍或4倍,需要通过WCK2CK同步机制解决时钟域对齐问题。该同步操作由带特殊标志位的CAS命令触发,控制器需提供半频WCK脉冲进行状态校准。同步完成后才能执行读写操作,且支持多存储体组同步和WCK常开模式以优化性能。掉电后必须重新执行同步流程,确保时钟域正确对齐。该机制有效解决了高速内存接口的时序挑战,为LPDDR5性能提升提供关键技术支撑。

一只豌豆象的博客 2005

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

html table-cell用法,布局(一)display:table-cell

html:一行文字多行文字......css:div{height:200px;width:200px;border:1px solid red;}1)单行文字垂直居中.box1{line-height:200px;}2)多行文字居中.box2{display:table-cell;vertical:middle;}3)容器居中1.box3{position:absolute;top:50%;le...

weixin_28785657的博客 1773

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

【路一直都在】----img标签垂直居中问题

先上代码 .dianshang ul li a{   height:100px;   vertical-align:middle;   display:table-cell; width:174px;   text-align:center; } .dianshang ul li img{   width:80%; } ...

198

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

CSS实现垂直居中

1、line-height div{ height: 100px; line-height:100px; text-align:center; } 2、display:table-celltable-cell这个属性是在看head first 书的时候学习的,通过display 设置为table table-row table-cell,让元素以表格的样子显示。 .o

lowers_sunshine的博客 290

table-cell布局

display:table-cell属性简介 display:table-cell;会使元素表现的类似一个表格中的单元格td,利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性,使用table-cell时最好不要与float以及position: absolute一起使用,设置了table-cell的元素对高度和宽度高度敏感,对margin值无反应,可以响应padding...

izwell的博客 3万+

CSS——自适应布局之水平居中和table-cell大小不固定元素的垂直居中

再这篇博客之后,我会连着几篇都会写一些有关css自适应的文章。因为我之前对自适应也不是特别的精通,所以想借助写几篇博客来提高自己在这方面的技术。 水平居中 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</t...

qq_42683219的博客 547

display:table-cell布局

display:table-cell布局display:table-cell指让标签元素以表格单元格的形式呈现,使元素类似于td标签。IE8+及现代版本的浏览器都支持此属性,IE6/7不支持(可用其他方法实现类似效果)。同样,display:table-cell属性也会被float,position:absolute等属性破坏效果,所以尽量避免同时使用。CSS display属性的表格布局相关属性的

Aliguagua的博客 1万+

css元素水平垂直居中

/图片与文字垂直居中,但会有少量偏差,再通过。在应用一的基础上,给子项(元素) 添加 vertical-align: middle;//子元素相对父元素水平(主轴)居中。//子元素相对父元素垂直(交叉轴)居中。这种写法,在没有指定子元素宽高的情况下,也能让其在父容器中垂直居中。//给父元素加,弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;

博哥的二进制世界 2048

图片水平垂直居中的几种方法总结

1、固定图片大小水平垂直居中,图片300*200 如下: html代码 <div class="con"> <img src="images/fengche.png" alt=""> </div> css代码 .con{ width: 40%; height: 300px; margin:50px auto; bo...

阿俊的博客 3922

display:table-cell

一、display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用(写于2016年8月24日:时代在变,当下,是时候登上舞台了)。 我们都知道,单元格有一些比...

liangtaox8的博客 6875
上一篇: flex布局实现小标题
下一篇: vue中实现移动端的scroll滚动
景洪在编程
博客等级 码龄9年 13粉丝 63原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值