Fatal编程技术网
  • css/
  • Css 垂直居中多行文字和：在图像元素之前

Css 垂直居中多行文字和：在图像元素之前

css

Css 垂直居中多行文字和：在图像元素之前,css,icons,vertical-alignment,Css,Icons,Vertical Alignment,我有一个元素，在：：before中有一个文本和一个图像作为其图标。 文本可以有1或2行高。我希望图像和文本都垂直居中。我试过了 display: table-cell; vertical-align: middle; text-align: center; 此处：。 但我不工作。如果没有：：before元素，文本将居中，但图像会将其打断。 我该怎么办？您可以不使用伪元素，只需将背景位置设置为，并将左侧填充设置为。textcenter JSFiddle- CSS: .textcenter {

我有一个元素，在：：before中有一个文本和一个图像作为其图标。 文本可以有1或2行高。我希望图像和文本都垂直居中。我试过了

display: table-cell;
vertical-align: middle;
text-align: center;
此处：。 但我不工作。如果没有：：before元素，文本将居中，但图像会将其打断。
我该怎么办？

您可以不使用伪元素，只需将
背景位置设置为
，并将
左侧填充设置为
。textcenter

JSFiddle-

CSS:


.textcenter {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    /*background: #cc1;*/
    background-image: url('http://dummyimage.com/30');
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 40px;
}



你可以不用伪元素，试试那个演示-@Mary Melody。看起来不错。但是，如果图标大小不同，以便将该值用于左边的填充，该怎么办？我可以使用此解决方案（我可以使用sass获取填充的图像大小），但当我使用精灵作为图像源时，它会失败。我怎样才能让精灵在这里工作？@user2520818抱歉，我对精灵了解不多，但这可能会有所帮助，或者你应该在上问一个新问题