0

我想用这个 css 代码将图像及其标题居中在一个 div 中

.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
}

.titleIkon{
margin-right:2%;
display:table-cell;
vertical-align:middle;
}

通过这个小提琴http://jsfiddle.net/7kx4r/的外观，我可以看出图标或文本也不是居中的。我该如何解决这个问题？

4

7 回答 7

3

删除不必要的 CSS 并使用以下 CSS：

.title {background-color:pink;color:white; padding:10px; }
.titleIkon{
    margin-right:2%;
    display:inline;
}

演示

于 2012-08-24T10:23:50.440 回答
1

你需要.title上课display: table-cell;

.title{
  margin-right:2%;
  display:table-cell;
  vertical-align:middle;
}

小提琴

注意：Table-cell 在旧 IE 浏览器中不起作用

于 2012-08-24T10:15:01.760 回答
0

text-align与您div的上课title一起使用

text-align: center;

检查这个小提琴http://jsfiddle.net/7kx4r/4/

于 2012-08-24T10:14:53.697 回答
0

像这样的东西？ http://jsfiddle.net/7kx4r/8/

只需添加width:XXXpx; margin:0 auto;

于 2012-08-24T10:17:35.513 回答
0

试试这个 CSS：

.box {border:2px solid #0094ff;}
.title {background-color:pink;color:white;height:10px; line-height:3px; padding:10px;}
.content {color:#333;padding:10px;}
.box {
    position:relative;
    -moz-border-radius-topright:5px;
    -moz-border-radius-topleft:5px;
    -webkit-border-top-right-radius:5px;
    -webkit-border-top-left-radius:5px;
}

.titleIkon{
    position:absolute;
    top:50%;
    margin-top: -8px;
}

这里发生了什么： position:relative 为 .box 的孩子创建了一个新的偏移上下文。

position:absolute 告诉 .titleIkon 使用相对于 .box 的偏移参数（左、右、上、下）

top:50% 告诉 .titleIkon 它应该将其顶部边缘位置视为父级高度的 50%。

margin-top: -8px 告诉浏览器将图像向上移动一半高度（16px / 2 = 8px）

于 2012-08-24T10:18:39.300 回答
0

只需定义display:table-cell; vertical-align:middle;您的.title类。

它的工作 IE8 到 IE 10

见 dmeo - http://jsfiddle.net/7kx4r/10/

于 2012-08-24T10:21:06.450 回答
0

希望你想要这个。

text-align: center如果您只希望粉色线位于中心，请给出。http://jsfiddle.net/7kx4r/17/

于 2012-08-24T10:43:12.303 回答