垂直和水平居中在CSS中的文字圈(如iPhone通知徽章)

我正在寻找一种在CSS3中做一个跨浏览器iPhone类徽章的方式。 我显然喜欢用这个一个div,但替代解决scheme将罚款。 重要的因素是它需要在所有浏览器中水平和垂直居中。

关于这些通知的一个有趣的devise问题是它们不能有一个指定的宽度(高度是固定的) – 他们应该能够处理[在ASCII绘图](1)和(1000),其中(1000)不是一个完美的圆形,而是看起来更像是一个胶囊。

编辑 :其他约束(来自史蒂文):

  • 没有JavaScript
  • 显示属性不会改变为表格单元格,这是有问题的支持状态

水平对中很容易: text-align: center; 。 可以通过设置与容器高度相等的line-height来实现元素内部文本的垂直居中,但这在浏览器之间有细微差别。 在通知徽章等小元素上,这些元素更为明显。

更好的方法是将line-height设置line-height等于font-size (或稍小)并使用填充。 你将不得不调整你的身高以适应。

这是一个仅有CSS的单一的<div>解决scheme,看起来很像iPhone。 他们扩大与内容。

演示: http : //jsfiddle.net/ThinkingStiff/mLW47/

输出:

在这里输入图像说明

CSS:

 .badge { background: radial-gradient( 5px -9px, circle, white 8%, red 26px ); background-color: red; border: 2px solid white; border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */ box-shadow: 1px 1px 1px black; color: white; font: bold 15px/13px Helvetica, Verdana, Tahoma; height: 16px; min-width: 14px; padding: 4px 3px 0 3px; text-align: center; } 

HTML:

 <div class="badge">1</div> <div class="badge">2</div> <div class="badge">3</div> <div class="badge">44</div> <div class="badge">55</div> <div class="badge">666</div> <div class="badge">777</div> <div class="badge">8888</div> <div class="badge">9999</div> 

如果你的内容的高度未知,但你知道容器的高度。 以下解决scheme工作得非常好。

HTML

 <div class="center-test"> <span></span><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt obcaecati maiores nulla praesentium amet explicabo ex iste asperiores nisi porro sequi eaque rerum necessitatibus molestias architecto eum velit recusandae ratione.</p> </div> 

CSS

 .center-test { width: 300px; height: 300px; text-align: center; background-color: #333; } .center-test span { height: 300px; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; } .center-test p { display: inline-block; zoom: 1; *display: inline; vertical-align: middle; color: #fff; } 

示例http://jsfiddle.net/thenewconfection/eYtVN/

newby's显示一个gotcha:inline-block; [span]和[p]没有html空格,所以跨度不占用任何空间。 此外,我已经添加在CSS黑客显示内联块的IE浏览器。 希望这可以帮助别人!

有趣的问题! 虽然有很多水平和垂直居中alignment的指南,但是对于居中的div具有不确定宽度的主题的权威性处理显然是不存在的。

我们来应用一些基本的限制:

  • 没有Javascript
  • 显示属性不会改变为table-cell ,这是有问题的支持状态

考虑到这一点,我进入战场是使用inline-block显示属性来水平居中在一个绝对定位的div的预定高度,垂直集中在父容器在传统的top: 50%; margin-top: -123px top: 50%; margin-top: -123px时尚。

标记: div > div > span

CSS:

 body > div { position: relative; height: XYZ; width: XYZ; } div > div { position: absolute; top: 50%; height: 30px; margin-top: -15px; text-align: center;} div > span { display: inline-block; } 

来源: http : //jsfiddle.net/38EFb/


另一种解决scheme不需要额外的标记,但很可能会产生比解决问题更多的问题,即使用line-height属性。 不要这样做。 但是,这里作为学术笔记包括在内: http : //jsfiddle.net/gucwW/

这是一个与zurb基础的css框架相配合的平面徽章的例子
注意:您可能需要调整不同字体的高度。

http://jsfiddle.net/jamesharrington/xqr5nx1o/

魔术酱!

 .label { background:#EA2626; display:inline-block; border-radius: 12px; color: white; font-weight: bold; height: 17px; padding: 2px 3px 2px 3px; text-align: center; min-width: 16px; } 

优秀的select:

在这里输入图像说明

演示: http : //www.codebasehero.com/files/notification-menu/demo/index.html

下载和文件: http : //www.codebasehero.com/2011/07/jquery-notification-menu/

对不起,这是自己的答案,但我是一个新手,无法弄清楚如何评论下我正在评论的答案正确的地方。 不pipe怎样:Richard Herries的答案有一个缺陷。

我不认为这是一个例外的情况下,想在一个大的“X”中作为一个closures框。 但是,当字体大小接近div尺寸时,它在Safari中不能垂直居中,并且非常明显地具有比底部更多的空间。

 .center-test { width: 30px; height: 30px; text-align: center; background-color: #333; } .center-test span { height: 30px; display: inline-block; zoom: 1; *display: inline; vertical-align: middle; } .center-test p { display: inline-block; zoom: 1; *display: inline; vertical-align: middle; color: #fff; font-size:30px;} <div class="center-test"> <span></span><p>X</p> </div> 

示范: http : //jsfiddle.net/5WQXF/

    Interesting Posts