將文本的位置移動到html中的框中

Question

嘗試將圖片上的鼠標懸停在圖片上方，其中不透明的疊加層顯示在單詞上，但有點麻煩。

我的代碼如下：

<style type="text/css"> 
    a.hovertext { 
    position: relative; 
    width: 220px; 
    text-decoration: none !important; 
    text-align: center; 
    } 
    a.hovertext:after { 
    content: attr(data-title); 
    position: absolute; 
    left: 0; 
    bottom: 5px; 
    padding: 0em 0px; 
    width: 220px; 
    height: 220px; 
    background: rgba(0,0,0,0.8); 
    text-decoration: none !important; 
    color: #fff; 
    opacity: 0; 
    -webkit-transition: 0.5s; 
    -moz-transition: 0.5s; 
    -o-transition: 0.5s; 
    -ms-transition: 0.5s; 
    } 
    a.hovertext:hover:after, a.hovertext:focus:after { 
    opacity: 1.0; 
    } 
</style> 

<a class="hovertext" data-title="Europe 2014" href="URL"><img alt="" border="0" src="URL" height="220" width="220" /></a> 

的想法是我怎麼想，但我無法弄清楚如何將文本移動到盒子的中間垂直，這樣它完全居中，以及如何更改字體的大小和樣式。

任何想法？我相信這是一個簡單的修改，但我不擅長html。

Answer 1

而不是使用line-height的，你可以用它來實現自己的目標：

display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */ 
display: -moz-box; /* OLD: Firefox (buggy) */ 
display: -ms-flexbox; /* MID: IE 10 */ 
display: -webkit-flex; /* NEW, Chrome 21–28, Safari 6.1+ */ 
display: flex; /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */ 

-webkit-box-align: center; 
-moz-box-align: center; 
-ms-flex-align: center; 
-webkit-align-items: center; 

justify-content: center; /* align horizontal */ 
align-items: center; /* align vertical */ 

更新與font-size和font-family：http://jsfiddle.net/Q6jLX/2/（更新爲兼容IE10也有-ms-flexbox）

我已經加入了：

a.hovertext:after { 
    ....... 
    font-size: 30px; 
    font-family: 'Montserrat', sans-serif; 
    ....... 
} 

和進口谷歌字體：<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

我的提示是，下載您需要，然後使用它的字體。

-----------另一種方法無FLEX和LINE-HEIGHT ------------

我不知道，如果你使用的是插件或你是自己編碼的一切，如果data-title不是強制性的，這裏的另一種方法：http://jsfiddle.net/Q6jLX/3/

display: table-cell兼容性：http://www.browsersupport.net/CSS/display:table-cell

Answer 2

這裏是您的示例的修訂代碼。檢查a.hovertext：之後，我加入的line-height它

a.hovertext { 
    position: relative; 
    width: 220px; 
    text-decoration: none !important; 
    text-align: center; 
    } 
    a.hovertext:after { 
    content: attr(data-title); 
    position: absolute; 
    left: 0; 
    bottom: 5px; 
    padding: 0em 0px; 
    width: 220px; 
    height: 220px; 
    background: rgba(0,0,0,0.8); 
    text-decoration: none !important; 
    color: #fff; 
    opacity: 0; 
    -webkit-transition: 0.5s; 
    -moz-transition: 0.5s; 
    -o-transition: 0.5s; 
    -ms-transition: 0.5s; 
    line-height: 220px; 
    } 
    a.hovertext:hover:after, a.hovertext:focus:after { 
    opacity: 1.0; 
    } 

Answer 3

添加line-height到下面的類：

a.hovertext { 
    position: relative; 
    width: 220px; 
    text-decoration: none !important; 
    text-align: center; 
    line-height: 220px; 
    } 

fiddle

也爲大小，你可以使用font-size併爲字體樣式你可以font-family像下面的例子：

example with font size and font family

Answer 4

這工作，以及 - 添加了補：

<style type="text/css"> 
    a.hovertext { 
    position: relative; 
    width: 220px; 
    text-decoration: none !important; 
    text-align: center; 
    } 
    a.hovertext:after { 
content: attr(data-title); 
position: absolute; 
left: 0; 
/* bottom: 5px; */ 
padding: 102px 70px; 
/* width: 220px; */ 
/* height: 220px; */ 
background: rgba(0,0,0,0.8); 
text-decoration: none !important; 
color: #fff; 
opacity: 0; 
vertical-align: middle; 
line-height: 100%; 
-webkit-transition: 0.5s; 
-moz-transition: 0.5s; 
-o-transition: 0.5s; 
-ms-transition: 0.5s; 
    } 
    a.hovertext:hover:after, a.hovertext:focus:after { 
    opacity: 1.0; 
    } 
</style> 

Answer 5

1. 澄清：以中心內容垂直，你應該給股利相同值的屬性line-height和height

a.hovertext:after { 
      height: 220px; 
      line-height: 220px; 
     } 

這是一個跨瀏覽器解決方案。

2.改變字體的大小應更改的font-size或font-weight或font-style（例如font-size:25px; font-weight:bold; font-style:italic） 對於文檔中的值指here