[英]Vertical align in header elements
我知道這里有很多問題,但我嘗試的所有方法似乎都不適用於我的代碼。
我想垂直對齊元素中的文本
HTML:
<div id="mainWrapper">
<div id="header">
<div id="logo" class="headerElements">
<h:outputText class="headerText" value="RedPrice" />
</div>
<div id="login" class="headerElements">
<h:outputText class="headerText" value="Login" />
</div>
<div id="register" class="headerElements">
<h:outputText class="headerText" value="Register" />
</div>
<div id="follow" class="headerElements">
<h:outputText class="headerText" value="Follow us" />
</div>
</div>
</div>
CSS:
*{
margin:0;
padding:0;
}
body,html {
height: 100%;
font-family: 'Quicksand', sans-serif;
}
div#mainWrapper {
height: 100%;
width: 100%;
background: url(../images/women.jpg) no-repeat center center;
}
div#header {
width: 100%;
height: 5%;
background: white;
opacity: 0.5;
}
div.headerElements {
float: left;
height: 100%;
width: 10%;
text-align: center;
}
div.headerElements:hover {
background: orangered;
opacity: 0.5;
}
.headerText {
font-size: x-large;
}
我已經嘗試過:(不成功)
display: table-cell
ul
和lis
並設置display:table和display:table-cell 有人能為我提供解決方案嗎?
您可以使用
div.headerElements:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
演示 (注意:我增加了包裝器的高度以便更好地看到它)
這是另一個建議,但我不確定我理解這個問題。
div {
height: 40px;
line-height: 40px;
vertical-align: middle;
}
我最終使用了flex容器。 所以在這個例子中,將div#mainWrapper的CSS更改為:
div#mainWrapper {
height: 100%;
width: 100%;
background: url(../images/women.jpg) no-repeat center center;
display: flex;
align-items: center;
}
喲也可以用這種方式 -
1: - Html部分
<div>
<h1>try me</h1>
</div>
2: - Css Part
div {
background: #000;
color: #FFFFFF;
height: 30px;
display: table;
width: 100%;
text-align: center;
}
div > h1 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
嘗試用這個替換你的實際css“div.headerElements”(剛刪除“float:left;”):
div.headerElements {
height: 100%;
width: 10%;
text-align: center;
}
你可以使用clear:both;
實現這一目標。 像這樣的東西:
div.headerElements {
float: left;
height: 100%;
width: 10%;
clear: both;
text-align: center;
}
檢查此JSFiddle以說明此實現。
最簡單易用的解決方案imo ..除非你支持IE8
否則最安全的是:
HTML
<h2>
<span>30 mins</span>
</h2>
CSS
h2 {
height: 120px;
position: relative;
}
h2 span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
費德爾先生
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.