• 关于

    垂直/水平居中

    的搜索结果

回答

方法一:绝对定位居中(原始版之已知元素的高宽) .content { width: 200px; height: 200px; background-color: #6699ff; position: absolute; /*父元素需要相对定位*/ top: 50%; left: 50%; margin-top: -100px; /*设为高度的1/2*/ margin-left: -100px; /*设为宽度的1/2*/ } 方法二:绝对定位居中(改进版之一未知元素的高宽) .content { width: 200px; height: 200px; background-color: #6699ff; position: absolute; /*父元素需要相对定位*/ top: 50%; left: 50%; transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/ } 方法三:绝对定位居中(改进版之二未知元素的高宽) .content { width: 200px; height: 200px; background-color: #6699ff; margin: auto; /*很关键的一步*/ position: absolute; /*父元素需要相对定位*/ left: 0; top: 0; right: 0; bottom: 0; /*让四个定位属性都为0*/ } 方法四:flex 布局居中 body { display: flex; /*设置外层盒子display为flex*/ align-items: center; /*设置内层盒子的垂直居中*/ justify-content: center; /*设置内层盒子的水平居中*/ .content { width: 200px; height: 200px; background-color: #6699ff; } } 那么问题来了,如何垂直居中一个 img(用更简便的方法。) .content { //img的容器设置如下 display: table-cell; text-align: center; vertical-align: middle; }

茶什i 2019-12-02 03:16:39 0 浏览量 回答数 0

回答

css图片水平居中1.利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下: 比如: 2.利用文本的水平居中属性text-align: center 比如: css图片垂直居中 1.利用高==行高实现图片垂直居中这种方法是要注明高度才可以使用,代码如下: 2.利用绝对定位实现图片垂直居中如果已知图片的宽度和高度可以这样,代码如下: <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width: 120px; height: 40px;position: absolute; left:50%; top: 50%; margin-left: -60px;margin-top: -20px;" />

星空万里 2019-12-02 00:58:27 0 浏览量 回答数 0

问题

这个代码为什么能够水平和垂直都居中?

杨冬芳 2019-12-01 19:55:45 948 浏览量 回答数 1

阿里云试用中心,为您提供0门槛上云实践机会!

0元试用32+款产品,最高免费12个月!拨打95187-1,咨询专业上云建议!

回答

方法一:使用 display: inline-block,然后父级元素 :text-align:center;,同时,自己 text-align: left还原方法二: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Centering an Element on the Page</title> </head> <body> <h1>OMG, I’m centered</h1> </body> </html> html { height: 100%; } body { display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本语法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本语法: IE 10 */ display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */ /*垂直居中*/ /*老版本语法*/ -webkit-box-align: center; -moz-box-align: center; /*混合版本语法*/ -ms-flex-align: center; /*新版本语法*/ -webkit-align-items: center; align-items: center; /*水平居中*/ /*老版本语法*/ -webkit-box-pack: center; -moz-box-pack: center; /*混合版本语法*/ -ms-flex-pack: center; /*新版本语法*/ -webkit-justify-content: center; justify-content: center; margin: 0; height: 100%; width: 100% /* needed for Firefox */ } /*实现文本垂直居中*/ h1 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 10rem; }

杨冬芳 2019-12-02 02:50:41 0 浏览量 回答数 0

问题

父级元素以及子元素高度宽度未知如何实现水平垂直居中?

杨冬芳 2019-12-01 19:45:29 1017 浏览量 回答数 1

问题

问一个网页中div居中问题,求解决

杨冬芳 2019-12-01 19:43:13 920 浏览量 回答数 1

问题

纠缠不休的网页中div居中问题,求解决

杨冬芳 2019-12-01 20:04:39 746 浏览量 回答数 1

问题

inline-block 元素会造成垂直不居中?

杨冬芳 2019-12-01 19:41:20 1130 浏览量 回答数 1

问题

实现div里的img图片水平垂直居中

chenchuan 2019-12-01 21:37:34 1111 浏览量 回答数 0

回答

import java.awt.BorderLayout; import java.awt.Color; import java.awt.Container; import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JPanel; import javax.swing.JTextField; public class Calculation extends JFrame implements ActionListener{ private JTextField txfResult;//显示操作结果的文本框 JTextField txfM;//显示记忆的索引值的文本框 Double dM=0d;//存储数据 public Calculation() { super("swing 计算器实例"); /*设置用于显示的文本框*/ txfResult =new JTextField("0",30);//初始文本显示0 最大列数30 txfResult.setBackground(Color.WHITE); txfResult.setHorizontalAlignment(JTextField.RIGHT);//数字在文本框中靠右显示 txfResult.setEditable(false);//文本框不可编辑 即为readOnly只读属性 JPanel ResultTextPanel=new JPanel();//放操作结果文本框的面板 ResultTextPanel.add(txfResult); /*设置用于控制数字的键与显示记忆索引值的文本框*/ txfM=new JTextField(2);//最长2列 JButton b1=new JButton("Backspace");//退格键 JButton b2=new JButton("CE");//重置键 JButton b3=new JButton("C");//清0键 JPanel ControlPanel=new JPanel(); ControlPanel.setLayout(new GridLayout(1, 4, 2, 2));//1行4列 水平间距2 垂直间距2 ControlPanel.add(txfM); ControlPanel.add(b1); ControlPanel.add(b2); ControlPanel.add(b3); b1.addActionListener(this); b2.addActionListener(this); b3.addActionListener(this); /*数字和运算符键*/ String dcKey[]= {"MC","7","8","9","/","sqrt","MR","4","5","6","*","%","MS","1","2","3","-","1/x" ,"M+","0","+/-",".","+","="}; JPanel dcKeyPanel =new JPanel();//数字和运算符的面板 dcKeyPanel.setLayout(new GridLayout(4, 6,2,2)); //一个 循环放好所有数字和运算符组件 for(int i=0;i<24;i++) { JButton b=new JButton(dcKey[i]); dcKeyPanel.add(b); b.addActionListener(this); } Container ct=this.getContentPane();//窗体内容面板对象 ct.setLayout(new BorderLayout()); ct.add(ResultTextPanel,BorderLayout.NORTH); ct.add(ControlPanel,BorderLayout.CENTER); ct.add(dcKeyPanel,BorderLayout.SOUTH); pack(); setVisible(true); setResizable(false);//禁止最大化 setLocationRelativeTo(null);//居中显示 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] args) { new Calculation(); } //////////////////////////////////////////////////////数字键和功能键的实现///////////////////////////////////////////////////////// private boolean newDigital=true;//类内全局boolean变量 用于表示是否是输入数的标志 private String operation="";//表示运算符的字符串 private double d1;//二元运算前操数 private double d2;//二元运算后操作数 private int optionValue;//区别加减乘除运算符的变量 /*监听方法*/ @Override public void actionPerformed(ActionEvent e) { String s=(e.getActionCommand());//返回与此动作相关的命令字符串 就是button上显示的字 String str=txfResult.getText(); /*后退键*/ if(s.equals("Backspace")) { if(str.equals("0")||str.equals("")) {//已经是清0状态下 不可再清0了 return; } String s1=txfResult.getText(); txfResult.setText(s1.substring(0, s1.length()-1));//截掉最后一个数字 } /*重置键*/ if(s.equals("CE")) { txfResult.setText("0"); newDigital=true;//是否是新输入的数的标志设置为true } /*清0键*/ if(s.equals("C")) { txfResult.setText("0"); optionValue=0;//表示运算符的变量设置为0 newDigital=true;//表示是否新输入的数的标志设置为true } /*数字键*/ if(s.length()==1&&s.charAt(0)>='0'&&s.charAt(0)<='9') { if(!newDigital) { txfResult.setText(str+s);//不是新输入的数 }else { txfResult.setText(s); newDigital=false;//表示是否新输入的数的标志设置为false } return; } /*小数点*/ if(s.equals(".")) { if(txfResult.getText().indexOf(".")==-1) {//若之前尚不存在小数点 /*判断数字是否0打头*/ if(txfResult.getText().trim().startsWith("0")) {//强大的API txfResult.setText("0."); newDigital=false; }else { txfResult.setText(str+".");//str事件刚开始就得到的txfResult.getText() } } return; } /* 表示数字正负符号+/- */ if(s.equals("+/-")) { double d=Double.parseDouble(str.trim());//获取输入的数字 txfResult.setText(String.valueOf(-d));//取得获取输入数字的相反数 return; } //////////////////////////////////////////////////////加减乘除运算的实现///////////////////////////////////////////////////////// if(s.equals("+")) { d1=Double.parseDouble(txfResult.getText());//立刻获取前操作数的值 txfResult.setText(""); optionValue=1;//设置运算符标志 } if(s.equals("-")) { d1=Double.parseDouble(txfResult.getText()); optionValue=2; } if(s.equals("*")) { d1=Double.parseDouble(txfResult.getText()); optionValue=3; } if(s.equals("/")) { d1=Double.parseDouble(txfResult.getText()); optionValue=4; } if(s.equals("=")) { d2=Double.parseDouble(txfResult.getText());//获取后操作数的值 /*根据运算符标志的不同值确定计算结果*/ switch(optionValue) { case 1: txfResult.setText(String.valueOf(d1+d2)); break; case 2: txfResult.setText(String.valueOf(d1-d2)); break; case 3: txfResult.setText(String.valueOf(d1*d2)); break; case 4: if(d2!=0) { txfResult.setText(String.valueOf(d1/d2)); }else { txfResult.setText("除数不能为0"); return; } break; } operation="";//运算结束 清空运算符 } ////////////////////////////////求平方根 倒数 百分比运算///////////////////////////////// if(s.equals("sqrt")) { double d=Double.parseDouble(txfResult.getText().trim());//获取操作数的值 if(d>0) { txfResult.setText(String.valueOf(Math.sqrt(d)));//计算该值的平方根 }else { txfResult.setText("负数不能计算平方根"); } }else if(s.equals("1/x")) { double d=Double.parseDouble(txfResult.getText().trim());//计算倒数 if(str.equals("0")) { txfResult.setText("除数不能为0"); }else { txfResult.setText(String.valueOf(1/d)); } }else if(s.equals("%")) { txfResult.setText((String.valueOf(Double.parseDouble(str)/100))); } ///////////////////////////////////////////实现数据的记忆功能/////////////////////////////////// if(s.equals("MC")) {//清空存储数据 txfResult.setText(""); dM=0d; newDigital=true; } if(s.equals("MR")) { if(txfM.getText().trim()!="") { txfResult.setText(""+dM);//显示存储数字当前值 } } if(s.equals("MS")) { dM=Double.parseDouble(txfResult.getText().trim()); txfM.setText("M");//存储区显示M } if(s.equals("M+")) { dM=dM+Double.parseDouble(txfResult.getText().trim());//将显示的数字与已经存储的数据相加 即更新存储数据 } } }

DM。 2020-05-27 13:40:29 0 浏览量 回答数 0

回答

video用div代替,放个播放按钮做背景水平垂直居中,onclick加到div上,然后动态设置div的innerHTML为video的html代码,添加autoplay="autoplay"试试 <video loop onClick="javascript:clickVideo();" ><source src="" type="video/webm"> </video>

云栖技术 2019-12-02 02:31:44 0 浏览量 回答数 0

回答

“html默认的情况是图片顶对齐而文字底对齐”,当文字和图片排列时会出现标准不统一的情况,所以你自己统一设置一种,比如“vertical-align:middle”就可以使文字和图片以垂直居中的方式对齐了。 文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐。 设置各对象的vertical-align属性,属性说明: `baseline-将支持valign特性的对象的内容与基线对齐 sub-垂直对齐文本的下标 super-垂直对齐文本的上标 top-将支持valign特性的对象的内容与对象顶端对齐 text-top-将支持valign特性的对象的文本与对象顶端对齐 middle-将支持valign特性的对象的内容与对象中部对齐 bottom-将支持valign特性的对象的文本与对象底端对齐 text-bottom-将支持valign特性的对象的文本与对象顶端对齐 `在此设置为text-bottom即可实现图片与文字位于同一水平线上,好看多了 如下:其他自己改 复制代码代码如下: <span style="width:120px;"><img src="/images/New_16_blue.gif" style="vertical-align:text-bottom;"/>目标任务</span>

杨冬芳 2019-12-02 02:42:23 0 浏览量 回答数 0

问题

以下方式不算垂直水平居中吗?

a123456678 2019-12-01 20:17:07 821 浏览量 回答数 1

问题

jxl 分sheet从数据库导出到excel? 400 报错

爱吃鱼的程序员 2020-05-31 13:01:40 0 浏览量 回答数 0

问题

jxl 分sheet从数据库导出到excel? 400 报错

优选2 2020-06-09 17:35:16 5 浏览量 回答数 1

问题

使JLabel文本垂直居中对齐

montos 2020-03-27 16:05:16 1 浏览量 回答数 1

问题

Itext PDF 导出出错,说是反射问题,也报the document has?400报错

爱吃鱼的程序员 2020-06-04 16:30:16 1 浏览量 回答数 1

回答

从实用价值考量:•背景可以铺到padding区域,而不能铺到margin区域 控制背景裁剪的background-clip不支持margin-box,换言之,无论如何,背景都无法铺到margin区域中•对于块级元素,若其width不为auto/default,可以设置margin: auto,可用于水平或垂直(需额外设置)方向上的自动居中,padding则无此功能•margin有折叠行为,padding则无 在子元素之上写margin表达子元素和父元素之间的留白时,需要在父元素上加入BFC,否则margin会与父元素折叠。padding则无此后顾之忧•margin可以设置为负值,padding则无法设置为负值margin负值可以让元素交叠,或撑宽元素的内容区域,这在有一定间隙的列表布局中极其有用 从实用价值考量:•背景可以铺到padding区域,而不能铺到margin区域 控制背景裁剪的background-clip不支持margin-box,换言之,无论如何,背景都无法铺到margin区域中•对于块级元素,若其width不为auto/default,可以设置margin: auto,可用于水平或垂直(需额外设置)方向上的自动居中,padding则无此功能•margin有折叠行为,padding则无 在子元素之上写margin表达子元素和父元素之间的留白时,需要在父元素上加入BFC,否则margin会与父元素折叠。padding则无此后顾之忧•margin可以设置为负值,padding则无法设置为负值margin负值可以让元素交叠,或撑宽元素的内容区域,这在有一定间隙的列表布局中极其有用

杨冬芳 2019-12-02 02:31:39 0 浏览量 回答数 0

回答

元素浮动之后文字会环绕而不是重合原因示例解答 既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢?上网各种搜、各种问人终于找到了解决方法,感兴趣的朋友不要错过最近在学习CSS,在浮动上遇到一问题:既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢? 这问题困扰了我整整一天,上网各种搜、各种问人,也没有让我信服的答案(可能有的答案是正确的,但是我基础差,没有听懂)。最后经过一整天搜索、询问的沉淀,最后在别人的推荐下看了《CSS权威指南》,现在自认为算是基本上明白怎么回事了。以下都是我自己所想,希望可以帮到和我一样的初学者。 为了彻底明白这个问题,必须先弄明白几个问题。 :第一,浮动的目的。最初时,浮动只能用于图像(某些浏览器还支持表的浮动),目的就是为了允许其他内容(如文本)“围绕”该图像。而后来的CSS允许浮动任何元素。 第一,绝对定位与浮动的区别。 复制代码代码如下: <body> <div id="container"> <div id="A">你好</div> <div id="B"> 第一,绝对定位与浮动的区别。绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。如果对元素A使用绝对定位的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。如图所示。 </div> </div> </body> 绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。例如,对于上面的html片段,如果将元素A定位到左上角的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。CSS代码和效果图如下。 复制代码代码如下: body { color:#FFF; } container { position:relative; width:500px; height:250px; background:#039; } A { position:absolute; top:0; left:0; width:200px; height:200px; background:#C00; } 代码如下: 而浮动,会以某种方式将浮动元素从文档的正常流中删除,并把浮动元素向左边和右边浮动,不过它还是会影响布局,关于浮动的有许多规则,读者可自行阅读《CSS权威指南》一书,介绍地很详细。采用CSS的特有方式,浮动元素几乎“自成一派”,不过它们还是对文档的其余部分有影响。这种影响源自于这样一个事实:一个元素浮动时,其他内容会“环绕”该元素。如果将元素A向左浮动的话,CSS代码和效果图如下图所示。由此可见,浮动之后,文字跑到了元素A的右边,即实现了文字环绕浮动元素的功能(如果A不浮动的话,div是块级元素,不可能有两个div处在同一行)。 但是这儿有一小问题,如果你仔细观察CSS代码的话和效果图的话,会发现元素B的背景和元素A的背景重合了一部分。这就是用来解释为什么说浮动元素脱离了正常的文档流但是还会影响布局的原因。之所以说元素A脱离了文档流,是因为元素B确实占据了元素A之前的位置,好像元素A已经不存在了似的。只所以说会影响布局,是因为元素B里的文字并没有随之占据元素A的位置,而是环绕在浮动之后的元素A旁边。这是为了避免元素A将元素B里的文字覆盖了,这恰好就是浮动的目的! 复制代码代码如下: body { color:#FFF; } #container { width:500px; height:250px; background:#039; } #A { float:left; width:200px; height:200px; background:#C00; } #B { width:480px; height:230px; background:#000; CSS布局实例 大家感兴趣的内容1css控制UL LI 的样式详解(推荐)2HTML设置超链接字体颜色和点击后的字体颜色3div水平垂直居中的完美解决方案4CSS 漂亮搜索框美化代码5CSS 首行缩进两个文字6css 中的background:transparent到底是什么意思有什么7CSS自定义select下拉选择框的样式(不用其他标签模拟)8css textarea 高度自适应,无滚动条9css 设置全屏背景图片10CSS圆角效果 -webkit-border-radius(CSS3中border-rad 云服务器 . 最近更新的内容深入剖析z-index属性CSS中的content属性使用教程浅析CSS中calc()的使用CSS3定位和浮动详解CSS盒子模型是什么一些常被你忽略的CSS小知识【必看】CSS默认可继承样式详解知识普及之CSS: body{font-size: 62.5%;}这种写法的原知识普及:彻底搞懂CSS中单位px和em,rem的区别CSS教程之div垂直居中的多种方法.

杨冬芳 2019-12-02 02:40:29 0 浏览量 回答数 0

回答

我也在开发中遇到这个问题,下面是我的想法,仅供参考首先,我觉得规划css的有个影响因素,就是网站的设计思路,如果网站是有一个整个的设计风格的话,规划的时候可以将模块的粒度适度放大。结构拆分基础框架:包含重置样式、栅格、css3动画模块,还是可以加上矢量图标库(iconfont)、辅助类通用样式库: 基本的复用模块,如button、form、table等,这个设计的时候要注意复用性和维护性业务样式:包含网站各页面之间的网站特有的样式,如导航、列表页、评论等解决方案: 可以归纳一下常用的css问题,如兼容多浏览器的高度不固定的垂直水平居中、png透明图片支持等。。代码规范命名空间+模块化+语义命名,可以参考Amaze UI HTML/CSS 规范兼容性列表:这个视业务需求而定了,如果逼格高一点,如ie8+基本和hack说再见了javascript组件:复杂的交互组件都是和javascript配合,建议公司内部有统一的规范,如果没有,可以参考业内的bootstrap、aralejs都可以开发工具现在通过预处理器开发样式很常见了吧,如果是node,就用stylus或者less,像est的样式工具库应该可以帮你提高效率哈文档文档不多说了,对于团队的维护性不言而喻,推荐一个专门用于css自动化文档工具 -- Hologram,不过依赖于ruby业界参考Semantic UI顾名思义,语义化的css库,组件的划分我觉得可以参考一下哈Amaze UI中国首个开源 HTML5 跨屏前端框架,采用less编写,移动优先,文档很详细,建议仔细阅读,收获不少bootstrap什么的就不用说了

a123456678 2019-12-02 02:23:15 0 浏览量 回答数 0

问题

【精品问答】前端开发必懂之CSS技术八十问

茶什i 2019-12-01 22:00:52 1642 浏览量 回答数 1
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站