Question

我需要将消息集中在div中，例如this 父div的宽度为100％，并且水平居中消息是没有问题的。此外，如您所见，图标也垂直居中，但我无法垂直居中。到目前为止，我应用于该div的唯一CSS是

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

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

Answer 1

像这样改变你的CSS

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

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

Check The Fiddle

Answer 2

您可以使用类似

的内容

.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;
  }

Answer 3

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% ;
}

Answer 4

对 DOM 和 CSS 的最小更改，并且不修复任何身高/行高

将vertical-align: middle;添加到.icon并将height:100%替换为vertical-align: middle;中的.content

请参阅此Working Fiddle

Answer 5

这应该以某种方式做到这一点。 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% ;    
}

希望这有帮助

Answer 6

Another approach

我更喜欢在带有子跨度的范围内显示消息和图标“相关”。这种方法有两个关键：

将容器 div垂直对齐父中的容器。在两个类中使用位置，在容器中使用边距，即可实现此目标。
将范围与父范围内的消息垂直对齐（带有图标的消息，使用 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;
}

css：与内联块div的垂直对齐问题

6 个答案: