父元素百分比 line-height设置文字居中

当父元素设置高度为百分比的时候 line-height的值自然也就不能是定值 不能用绝对的px值 ，但是给line-height设置百分比，实际上这个百分比是根据字体大小计算的，还是无法得出具体的百分比，所以遇到这种情况只能另辟蹊径，有两种解决办法：
1.给父元素设置display:flex;align-items:center;justify-content:center;
2.给父元素设置displa：table；需要居中的元素 设置 display:table-cell；vertical-align:middle；

原文地址：http://blog.51cto.com/13550695/2107638

时间： 2024-10-29 04:19:31

父元素百分比 line-height设置文字居中的相关文章

RadioButton 设置文字居中

效果图如下 最近需要做一个首页带有导航条的东西,然后就网上搜到用RadioButton开始做,然后刚开始就各种文字靠右,改好后 每个RadioButton里面设置了android:gravity="center",可还是不管用, 然后设置android:paddingLeft="0dp",和android:background="@drawable/背景图"然后就可以了

子元素float后，防止父元素塌陷的方法

A在浮动元素后加个div设置clear: both; height:0,overflow:hidden B使用clearfix;用于父元素上 1 .clearfix:after { 2 content: " "; 3 display: block; 4 clear: both; 5 height: 0; 6 } 7 .clearfix { 8 zoom: 1; 9 } 优化后的: 1 .clearfix { 2 zoom: 1; 3 display: table; 4 width: 1

子元素使用float 父元素撑开方法

一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图: 部分代码如下: 1 <style>2   #div1{border:1px solid red;float:left;}3   #div2,#div3{float:right;border:1px solid blue;}4 </style>5 6 <div id="div1">7   <div id="div2">two</

关于浮动元素对父元素高度的影响

css浮动会使子元素脱离文档流,有些情况下会使其父元素失去高度,从而影响页面的整体布局. 解决的办法就是:使用浮动之后,记得清除浮动, 下面是几种清除浮动的方法: 第一种: 父元素:after{ content:""; height:0; visibility:hidden; display:block; clear:both; } 第二种: <div class="box"> <div class="top"></

css父元素透明度（opacity）对子元素的影响

首先子元素会继承父元素的透明度: 设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度. 其次子元素的透明度是基于父元素的透明度计算的: 设置父元素opacity:0.5,即使设置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基础上设置的,因此子元素的opacity还是0.5. 解决办法: 利用CSS3属性rgba(即red+green+blue+alpha的颜色), 例如backg

浮动元素居中&amp;&amp;浮动元素内容相对于浮动元素父元素居中

一:浮动元素内容相对于浮动元素父元素居中 我们知道元素内容居中可以用text-align:center;但是如果元素是浮动的呢?就像下边这样,怎样使得所有链接水平居中? <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>浮动元素内容相对于浮动元素父元素居中</title> <style type="text/css"&g

父元素 高度固定，如何使其中的文字垂直居中？

方法一: 设置父元素高度,设置子元素行高垂直居中 <style> *{padding: 0;margin:0;font-size: 12px;} div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid blue; line-height: 200px;} span{display: inline-block;vertical-align: middle;line-height: 22px;} </st

子元素设置margin-top，父元素也受影响

外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好.例子可以查看下面代码(IE下表现"正常",标准浏览器下查看出现"bug"): <!doctype html> <html> <head> <title>子元素设置margin-top,父元素也受影响</title>

子元素设置浮动样式，父元素高度为0

子元素如果设置了浮动样式,那么它就会脱离文档流,从而导致父元素高度变成0,当然不能说这是一个Bug,float的出现的初衷就是为了实现文字环绕图片来实现图文混排和流式布局,所以只能说这种情况只能是由于浮动样式的特性决定的. 测试用例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd