怎么用css代码实现子元素在父元素水平居中,比如p在div里

如题所述

水平居中有两种情况:

    子元素,父级元素都是块级元素的时候,子级元素{margin:0 auto}。需要注意的是当子级元素的position为非默认及relative时,这种设置会失效。

    如p等标签中内的文字内容水平居中:使用{text-Align:center}。垂直居中设置该元素的行高等于元素的高。如:{height:100px;line-height:100px}可实现。注意:这种方法应用于行内元素

温馨提示:内容为网友见解,仅供参考
第1个回答  推荐于2017-11-25
假设形式为
<div class="AA">
<p>文字内容</p>
</div>
则加个css为
.AA p{text-align: center;}
同理id的类似,主要是为p元素加上text-align: center;
以上仅供参考,呵呵。追问

div是父元素,里面有三个子元素p,这三个的文职是一个靠左,一个靠右,一个居中

追答


文字内容靠左

文字内容靠右

文字内容居中

对应的css
.AA p.aa{text-align: left;}

.AA p.bb{text-align: right;}

.AA p.cc{text-align: center;}

以上我自己测试过在google chrome可以,供参考,具体还得看实际使用。

本回答被提问者和网友采纳
第2个回答  2012-08-14
如果text-center不能实现文字或元素的居中,可以定义子元素的左边距来实现居中的效果~追问

这个倒是用过,主要是ff根ie在解释边距上有部一样的地方,效果不一样

追答

margin-left或者margin-right如果碰到float-left在ie6下是会出现双倍的
所以要加上一句:
display:inline;你自己打下试试,我这是中文状态打得,希望对你有用。

第3个回答  2012-08-13
p{margin:10px auto;}上下外边距随便你设置,但是左右一定要设置为auto。

怎么用css代码实现子元素在父元素水平居中,比如p在div里
子元素,父级元素都是块级元素的时候,子级元素{margin:0 auto}。需要注意的是当子级元素的position为非默认及relative时,这种设置会失效。如p等标签中内的文字内容水平居中:使用{text-Align:center}。垂直居中设置该元素的行高等于元素的高。如:{height:100px;line-height:100px}可实现。注意:这种...

如何让子div在父div中水平居中?
你发的图中的效果,需要使用CSS来实现,代码如下:<style type="text\/css"> #zhongjian {width: 900px;} .mokuai {float: left; width: 300px;} .clear {clear: both;}<\/style><div id="zhongjian"><div class="mokuai_1 mokuai">853<\/div><div class="mokuai_2 mokuai">...

cssdiv居中的三种方法
方法一:使用margin属性实现水平居中 对于单个div元素,可以通过设置左右margin为auto来实现水平居中。这种方法适用于宽度固定的div。例如,给div设置一个固定的宽度,然后将左右margin都设置为auto,浏览器会自动计算并均匀分配两侧空白,使div水平居中。方法二:利用flexbox布局实现灵活居中 Flexbox是CSS3中的...

css子元素如何在父元素中居中
1、定位+margin:auto 父元素 position: relative 子元素 position: absolute left:0;top:0;right:0;bottom:0;margin: auto;2、定位+margin-left+margin-top 父元素 position: relative 子元素 position:absolute left:50%; top:50%; margin-left: -当前盒子宽度的一半; margin-top: -当前盒子高...

如何通过CSS使得子控件相对于父控件居中
css居中的方法有几种:第一种给父级元素加 text-align:center; 这种是针对于文本或者行内元素比如图片呀链接的居中 第二种:给子元素设置一个宽高,然后设置margin:0 auto;举例:div{ width:100px; height:100px; margin : 0 auto;} 第三种:先给父级元素加position:relative;再给子元素加...

html中div使用CSS实现水平\/垂直居中的多种方式
给父元素设置float,然后将父元素整体向右移动50%,再将子元素整体向左移动50%,来实现水平居中。记得将父元素清除浮动。虽然宽度不同weiqinl 但一样 水平居中了 使用float属性,记得清楚浮动 5:使用table布局,默认垂直居中 table默认垂直居中vertical-align:middle。如果还想要水平居中,那就是行内元素,...

css里面怎么让一个DIV居中
第一种方法是通过设置body元素的文本对齐方式为居中。具体实现的CSS代码为:body { text-align: center; }。这种方式会将body中的所有内容,包括内部的DIV元素,都进行水平居中。第二种方法是利用盒子模型实现。首先,我们需要创建一个宽度为100%的父级DIV,然后在这个DIV内嵌套另一个DIV。接下来,需要...

CSS div居中的三种方法
首先,采用margin方法,通过调整div元素的margin属性,使其四周留出合适的空白,从而达到居中的视觉效果。例如,对id为"nei"的div,设置合适的margin值即可实现。其次,position方法利用绝对定位实现居中。通过设置div的position属性为"absolute",并计算出其相对于父元素的精确位置,然后将其top、right、bottom...

css样式如何设置div元素水平垂直居中的三种方法
1.建立txt文档,更改后缀名为html,如图:2.右击html文件,选择用记事本打开,如图:3.讲解第一种div绝对定位水平垂直居中【CSS3使用transform】, transform中translate偏移的百分比值是相对于自身大小的,无论绝对定位元素的尺寸是多少,其都是水平垂直居中显示的,但问题是兼容性不好。IE9+以及其他现代...

css 怎么实现 div水平居中 呢?
1、新建html文件,在body标签中添加div标签,div标签中的内容为“演示文本”,添加题目中的css样式,为了方便演示,给div标签添加灰色背景,这时可以发现div靠近浏览器的左侧,文字在div中居中:2、为div标签添加新的外边距“margin”属性,属性值为“0 auto”,“0”指的是上下外边距为0,“auto”指的...

相似回答