1

我需要在 div 中将消息居中，像这样 父 div 的宽度为 100%，将消息水平居中是没有问题的。此外，如您所见，图标也垂直居中，但我无法将文本垂直居中。到目前为止，我应用于该 div 的唯一 css 是

.content {
    height: 100% ;
    display: inline-block ;
}

为什么消息 div 在 .container 中向下移动的任何建议。这是正确的跨浏览器方法吗？

4

6 回答 6

2

像这样改变你的CSS

.content {
height: 100% ;
display: inline-block ;
vertical-align:middle;
line-height:5px;
}

.container {
display: inline-block ;
height: 100% ;
}

检查小提琴

于 2013-09-20T12:31:03.303 回答
1

另一种方法。

我更喜欢在带有子跨度的跨度中包含消息和“相关”图标。这种方法的两个关键：

  1. 垂直对齐父容器内的容器div 。在两个类中使用位置，在容器中使用边距，您可以实现这一点。

  2. 将span与父span内的消息垂直对齐（带有图标的那个，它使用icon-message类）。请参阅 css 代码中的注释。

它适用于每个浏览器。

HTML

<div class="parent">
    <div class="container">
        <span class="icon-message">
            <span>message</span>
        </span>
    </div>
</div>

CSS

.parent {
    background-color: lightgrey ;
    width: 100% ;
    height: 70px ;
    text-align: center ; 
    position: relative;
}

.container {
    position: absolute;
    display: inline-block;
    height: 40px ;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 1px solid #000;
}

.icon-message {
    background: url( "http://upload.wikimedia.org/wikipedia/commons/8/88/Red_triangle_alert_icon.png" ) no-repeat;
    display: inline-block;
    background-size: 40px 40px; /* image's size */
    height: 40px; /* image's height */
    padding-left: 50px; /* image's width plus 10 px (margin between text and image) */
}

.icon-message span {
    height: 40px; /* image's height */
    display: table-cell;
    vertical-align: middle;
}
于 2013-09-20T13:19:52.557 回答
1

这应该以某种方式解决问题。 http://jsfiddle.net/sDWxN/6/

基本上，我添加了这个：

标记

<div class="parent">
  <div class="container">    
    <div class="content">
        <div class="icon">
            <p class="tocenter">some message here</p>
        </div>
      </div>
  </div>
</div>

CSS

.icon {
    display: inline-block ;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/8/88/Red_triangle_alert_icon.png) ;
    background-repeat: no-repeat ;
    background-position: 0 ;
    background-size: 8% ;
    width: 250px ;
    height: 100% ;
}
.content {    
    border:1px solid black;
    height: 100% ;    
}

希望这可以帮助

于 2013-09-20T13:02:12.460 回答
1

你可以使用类似的东西

.parent {
    background-color: lightgrey ;
    width: 100% ;
    height: 50px ;
    text-align: center ;  
    display: inline-block;
}
.content {
  height: 100%;
  display: inline-block;
  margin-top: -15px; //so that text lies at the center level of icon
  vertical-align: middle;
  }
于 2013-09-20T12:30:10.853 回答
1

http://jsfiddle.net/sDWxN/2/

.container高度是个问题，您可以将高度.container设置为 100% 以使其适应其父级。添加vertical-align:middle;到.content.

.content {
    height: 100% ;
    display: inline-block ;
    vertical-align:middle;
}

.container {
    display: inline-block ;
    height: 100% ;
}
于 2013-09-20T12:30:17.873 回答
1

对您的DOM和CSS进行最少的更改，并且不固定任何高度/行高

添加vertical-align: middle;并.icon替换height:100%为vertical-align: middle;in.content

看到这个工作小提琴

于 2013-09-20T12:48:04.920 回答