资讯专栏INFORMATION COLUMN

行内元素和块状元素居中

CKJOKER / 2265人阅读

摘要:可是文字是后台返回,中间内容部分要根据文字的长度而调整宽度。故采用以下方式搞定总结可以改变行内元素的对齐你想让它飞左还是居中还是飞右,,宽度可以自适应。块状元素居中的方式固定宽度行内元素居中的方式令父元素的下面这篇博文说的很好啦

今天碰到这么个需求,需要将左对齐的文字在界面的中间展示

如果文字的最大宽度是可控的,那很简单,div宽度固定,设置margin-left,margin-right auto就行了。

……

可是文字是后台返回,中间内容部分要根据文字的长度而调整宽度。故采用以下方式:

……

搞定

总结:
text-align可以改变行内元素的对齐(你想让它飞左还是居中还是飞右,so easy),宽度可以自适应。
块状元素居中的方式 :固定宽度+margin-left:auto;margin-right:auto;
行内元素居中的方式:令父元素的text-align:center;

下面这篇博文说的很好啦~
http://blog.csdn.net/freshlover/article/details/7076831

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115124.html

相关文章

  • CSS居中那些事

    摘要:定宽块状元素满足定宽和块状两个条件的元素是可以通过设置左右值为来实现居中的。设置方法改变块级元素的为类型设置为行内元素显示,然后使用来实现居中效果。 做前端这一年多来,其实一直都是偏向于js前后端,css什么的总是抱着够用就好的心态,从来没有系统的学习或总结过,结果现在的水平也一直停留在够用的阶段。感觉作为一名合格的前端工程师,不能让css成为自己的短板,于是简单的总结一下,高手绕路。...

    dingding199389 评论0 收藏0
  • 【前端】这可能是你看过最全的css居中解决方案了~

    摘要:水平居中行内元素解决方案适用元素文字,链接,及其其它或者类型元素,,部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中:行内元素解决方案 适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,i...

    csRyan 评论0 收藏0
  • 【前端】这可能是你看过最全的css居中解决方案了~

    摘要:水平居中行内元素解决方案适用元素文字,链接,及其其它或者类型元素,,部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居 1.水平居中:行内元素解决方案 适用元素:文字,链接,及其其它inline或者inline-*类型元素(inline-block,inline-table,i...

    Simon 评论0 收藏0
  • CSS水平居中垂直居中

    摘要:不定宽块状元素水平居中垂直居中利用属性垂直居中垂直居中利用布局不定高不定宽垂直居中垂直居中设置或另外设置为垂直居中或上下居中左右居中居中 CSS水平居中和垂直居中 行内元素居中 水平居中 1.给父元素设置text-align:center 行内元素span居中 2.flex布局 设置父元素display:flex;justify-content:center; ...

    silenceboy 评论0 收藏0
  • CSS水平居中垂直居中

    摘要:不定宽块状元素水平居中垂直居中利用属性垂直居中垂直居中利用布局不定高不定宽垂直居中垂直居中设置或另外设置为垂直居中或上下居中左右居中居中 CSS水平居中和垂直居中 行内元素居中 水平居中 1.给父元素设置text-align:center 行内元素span居中 2.flex布局 设置父元素display:flex;justify-content:center; ...

    z2xy 评论0 收藏0
  • 网页元素CSS居中实现完整攻略

    摘要:水平居中行内元素解决方案只需要把行内元素包裹在一个属性为的父层元素中,并且把父层元素添加如下属性即可水平居中块状元素解决方案这里可以设置顶端外边距水平居中多个块状元素解决方案将元素的属性设置为,并且把父元素的属性设置为即可水平居中多 水平居中:行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: .parent { ...

    mikasa 评论0 收藏0

发表评论

0条评论

CKJOKER

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<