簡體   English   中英

標題元素中的垂直對齊

[英]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; 
}

http://jsfiddle.net/E7DAe/

我已經嘗試過:(不成功)

  • 在headerElems中將line-height設置為100%
  • 設置display: table-cell
  • 將它放入ullis並設置display:table和display:table-cell

有人能為我提供解決方案嗎?

您可以使用

div.headerElements:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

演示 (注意:我增加了包裝器的高度以便更好地看到它)

根據http://css-tricks.com/centering-in-the-unknown/ ,閱讀完整說明。

這是另一個建議,但我不確定我理解這個問題。

div {
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}

http://jsfiddle.net/XXyp2/

我最終使用了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;
}

http://jsfiddle.net/E7DAe/3/

你可以使用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%);
}

費德爾先生

http://jsfiddle.net/hutber/wpmtkwkL/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM