Question

我尝试在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/

非常感谢任何帮助。

感谢，亚历

Answer 1

Demo

将父<li>定义为display: table，将元素<a>定义为vertical-align:middle＆amp; display: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>

Answer 2

您可以使用em来调整文本所在的父容器上的font-size。

#gallery a {
    text-decoration: none;
    color: #FFF;
    font-size: 0.6em; 
}

enter image description here

您也可以使用而不是font-size。 vh是CSS新视口大小的排版。

font-size:4.2vh;

然而，另一种技术不一致（对于所有按钮都是）在#gallery li上更改此内容：

line-height : 30px;
padding-top: 30px;

这会给你这样的东西：

enter image description here

Answer 3

您无法将多行文字与line-height垂直居中对齐。相反，如果古代浏览器支持不是问题，您可以使用css3 flexible boxes进行居中，方法是将以下内容添加到<li>

display: flex;
justify-content: center;
align-items: center;

Updated fiddle

如果要求较旧的浏览器支持，您可以使用this answer中提到的display:table方法

使用CSS在一个按钮中居中对齐多行文本

3 个答案: