使用CSS将按钮中的多行文本居中对齐

AlexUhde 发表于 Dev

亚历克斯·乌德

我正在尝试在CSS中创建一个以图像为背景的按钮。到目前为止，只要文本只有一行，我就可以使它工作。

现在，我试图使其与两行按钮一起使用，但是它要么制动了布局，要么像jsfiddle中一样不显示第二行。

这是我的CSS部分：

@font-face {
  font-family: 'easy_street_eps';
  src: url('http://www.fontsaddict.com/fontface/easy-street-eps.ttf');
}

#gallery {
  list-style: none;
  list-style-type: none;
}

#gallery a {
  text-decoration: none;
  color: #FFF;
}

#gallery a:hover {  text-decoration:underline;}
#gallery ul { -webkit-padding-start: 0px; }

#gallery li {
  padding: 0 20px 0 0;
  display: inline;
  background:url("http://imageshack.com/a/img843/2751/gidy.png") no-repeat scroll 0% 0%;
  font-family: "easy_street_eps";
  font-size:35px;
  color: #FFF;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  min-width: 200px;
  min-height: 140px;
  float:left;
  line-height : 140px;
  padding-top: 4.25px;
  transition: all 0.5s ease 0s;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
}

.gallery2lb {
  line-height: 20px;
  width: 100px;
  max-height: 140px;
}

这是jsfiddle：http : //jsfiddle.net/2vMPs/

很感谢任何形式的帮助。

谢谢，亚历克斯

4dgaurav

Demo

用＆定义父项<li>asdisplay: table和元素<a>本身，并删除其他不需要的样式，因为这将解决问题。vertical-align:middledisplay:table-cell

的CSS

li {
    display: table;
}
a {
    display: table-cell;
    vertical-align: middle;
}



@font-face {
    font-family:'easy_street_eps';
    src: url('http://www.fontsaddict.com/fontface/easy-street-eps.ttf');
}    

#gallery {
    list-style: none;
    list-style-type: none;
}
#gallery a {
    text-decoration: none;
    color: #FFF;
}
#gallery a:hover {
    text-decoration:underline;
}
#gallery ul {
    -webkit-padding-start: 0px;
}
#gallery li {
    /*padding: 0 20px 0 0;*/
    /* display: inline; */
    background:url("http://imageshack.com/a/img843/2751/gidy.png") no-repeat scroll 0% 0%;
    font-family:"easy_street_eps";
    font-size:35px;
    color: #FFF;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    min-width: 200px;
    min-height: 150px;
    float:left;
    /* line-height : 140px; 
    padding-top: 4.25 px; */
    transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
}
.gallery2lb {
    /* line-height: 20px; */
    width: 100px;
    max-height: 140px;
}

的HTML

<div style="text-align: center;">
    <div id="gallery">
        <ul>
            <li><a title="Candyland" href="#">Candyland</a>

            </li>
            <li class="gallery2lb"><a title="Diese Seite befindet sich noch im Aufbau" href="#">Alice in Wonderland</a>

            </li>
            <li><a title="Arielle" href="#">Arielle</a>

            </li>
            <li><a title="Rainbow" href="#">Rainbow</a>

            </li>
        </ul>
    </div>
</div>