5

我有一个特定的类，div它在左上角包含一个图标作为背景图像，并在div. 最小高度为 32px ，div以便显示所有图标。

当有多行文本时，这些行看起来很好，因为它们div向下延伸的长度超过了最小高度，但是当只有一行时，它与图标的中心不垂直对齐。

JSFiddle 在这里。

有没有办法让单行垂直对齐，但在多行时不会弄乱？

.test {
    background-color: #98c5ff;
    color: #093d80;
    width: 400px;
    min-height: 32px;
    background-image: url("http://google.com/favicon.ico");
    background-repeat: no-repeat;
    padding-left: 42px;
}
<div class="test"><p>Short message</p></div>
<hr />
<div class="test"><p>Rather long message that should hopefully wrap on to a second line at some point.</p></div>
<hr />
<div class="test"><p>Message<br />with<br />many<br />lines<br />.</p></div>

4

7 回答 7

8

您可以display像这样在您的 CSS 中使用：

.test {
    background-color: #999999;
    display: table; /* Add this in here. */
    width: 400px;
    min-height: 32px;
    background-image: url("http://google.com/favicon.ico");
    background-repeat: no-repeat;
    padding-left: 42px;
}

.test p {
    display: table-cell;
    vertical-align: middle;
}
于 2013-04-04T02:39:28.613 回答
2

display:flex也是一个选项.test。

如果.test持有一个，p那么margin:auto 0;应该就足够了：

http://jsfiddle.net/eXZnH/35/ 编辑：（固定小提琴）http://jsfiddle.net/eXZnH/36/ 

.test {
  background-color: #98c5ff;
  color: #093d80;
  width: 400px;
  min-height: 32px;
  background-image: url("http://google.com/favicon.ico");
  background-repeat: no-repeat;
  padding-left: 42px;
  display: flex;/* added */
}
p {
  margin: auto 0;/* added */
}
<div class="test">
  <p>Short message</p>
</div>
<hr />
<div class="test">
  <p>Rather long message that should hopefully wrap on to a second line at some point.</p>
</div>
<hr />
<div class="test">
  <p>Message
    <br />with
    <br />many
    <br />lines
    <br />.</p>
</div>

于 2016-03-05T22:18:57.457 回答
1

尝试固定位置position:absolute;

见小提琴： 这里

也在这里：
HTML：

<div class="container">
<div class="test"><p class="fix">Short message</p></div>
<hr />
<div class="test"><p>Rather long message that should hopefully wrap on to a second line at some point.</p></div>
<hr />
<div class="test"><p>Message<br />with<br />many<br />lines<br />.</p></div>
</div>

CSS：

.test {
    background-color: #98c5ff;
    color: #093d80;
    width: 400px;
    min-height: 32px;
    background-image: url("http://google.com/favicon.ico");
    background-repeat: no-repeat;
    padding-left: 42px;
}

.fix{
  position:absolute;
  bottom:390px;
}

bottom:390px即使我添加了 divcontainer以保持原位，您也可能需要修改该值。

于 2016-03-03T03:44:22.697 回答
1

由于使用显示表可能会影响您的宽度，因此我建议使用 sudo 元素.test:after来实现垂直对齐，background-position如果您打算垂直对齐图标，您也可以使用：

.test {
background-color: #98c5ff;
color: #093d80;
width: 400px;
min-height: 32px;
background-image: url("http://google.com/favicon.ico");
background-repeat: no-repeat;
padding-left: 42px;
   
}
.test:after{
content:"";
display:inline-block;
vertical-align:middle;
height:100%;
  
}
.test p{
  display:inline-block;
  vertical-align:middle;
  
}
<div class="test"><p>Short message</p></div>
<hr />
<div class="test"><p>Rather long message that should hopefully wrap on to a second line at some point.</p></div>
<hr />
<div class="test"><p>Message<br />with<br />many<br />lines<br />.</p></div>

更新你在这里小提琴

于 2016-03-04T09:41:08.800 回答
1

不是真正居中，而是在视觉上居中并保持一致性：填充顶部可以解决它，但数量取决于行高和字体大小。

.test p:first-child{padding-top:8px}

另一方面，如果您不介意更改多行 div 的行高，则可以为“p”元素设置行高以适应 div 高度。

.test {line-height:32px}

http://jsfiddle.net/eXZnH/34/

于 2016-03-05T12:40:27.110 回答
1

更简单的是在 CSS 中使用 ::before

.test {
  position: relative;
  padding-left: 32px;
  background-color: #DDD;
}

.test::before {
  content: url(http://google.com/favicon.ico);
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -16px; /* image height divided by 2 */
}

看看人

.test {
  position: relative;
  padding-left: 32px;
  background-color: #DDD;
}

.test::before {
  content: url(http://google.com/favicon.ico);
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -16px;
}
<div class="test">
<p>
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
bla bla bla<br />
</p>
</div>

<div class="test">
<p>bla bla bla bla</p>
</div>

于 2016-03-06T23:09:53.373 回答
-1

首先，您在每个 div 之后使用hr标签，因此您无法对齐它们。所以首先删除它们，然后将这些样式添加到.test类

.test {
   // another styles..
   width: 130px; //small width for test
   display: inline-block;
   vertical-align: middle;
}
于 2016-03-07T15:01:23.610 回答