Question

我希望使用此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/的外观，我可以看出，图标或文字也没有居中。我该如何解决这个问题？

Answer 1

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

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

DEMO

Answer 2

您需要.title课程display: table-cell;

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

Fiddle

注意：表格单元格在旧IE浏览器中不起作用

Answer 3

使用text-align将div作为<{1}}作为

title

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

Answer 4

这样的事情？ http://jsfiddle.net/7kx4r/8/

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

Answer 5

尝试使用此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）

Answer 6

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

its work IE8 to IE 10

请参阅dmeo - http://jsfiddle.net/7kx4r/10/

Answer 7

希望你想要这个。

如果您只想将粉红色线放在中心，请

text-align: center。http://jsfiddle.net/7kx4r/17/

将图标和文本垂直居中于div内

7 个答案:

DEMO