對齊標題標籤圖像

的中心，我有我的HTML代碼如下對齊標題標籤圖像

<div class="col-md-3 portfolio-item"> 
      <a href="#"> 
       <img class="img-responsive" src="images/starter.jpg" alt="starter"> 
       <h2> Starter</h2> 
      </a> 
    </div>

下面是我寫的CSS和正常工作。但我想知道什麼是將h2標籤垂直和水平放置到圖像中心的最佳方式。或者這是做到這一點的方式？

.portfolio-item h2 { 
     left: 100px; 
     position: absolute; 
     top: 45px; 
    } 

    .portfolio-item img { 
     position: relative; 
    }

來源

2015-08-18 Shareer

你可以發佈你的預期結果的圖像？對我來說，現在看起來好像你想將'h2'標籤放在圖像頂部，這是正確的嗎？ – timo

絕對。我希望標題位於圖像的頂部，並垂直和水平對齊中心。我所做的工作正常。但我覺得這不是正確的方式@timo – Shareer

那麼我認爲我的回答將滿足您的需求=）。 – timo

如果我理解正確的話，答案是從評論更新：

* {font-family: Segoe UI; margin: 0; padding: 0;} 
 
.portfolio-item a {position: relative; display: block; width: 100px; height: 100px;} 
 
.portfolio-item a img, .portfolio-item a span {position: absolute; left: 0;} 
 
.portfolio-item a span {top: 50%; margin-top: -0.75em; width: 100px; text-align: center;}

<div class="col-md-3 portfolio-item"> 
 
    <h2> 
 
    <a href="#"> 
 
     <img class="img-responsive" src="http://placehold.it/100x100" alt="starter" /> 
 
     <span>Starter</span> 
 
    </a> 
 
    </h2> 
 
</div>

來源

2015-08-18 06:52:46

請注意所提問題。標題應該是**在圖像的頂部**，而不是在旁邊。 –

@Paulie_D查看更新後的答案。 –

@praveen。標題是假設在圖像的頂部，我的CSS的問題是當標題中的字母增加時，它看起來不像它與中心對齊。 – Shareer

使用鏈接作爲包含的元素，然後定位相應的標題

* { 
 
    font-family: Segoe UI; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.portfolio-item a { 
 
    position:relative; 
 
    display:inline-block; 
 
} 
 
.portfolio-item a h2 { 
 
    position:absolute; 
 
    text-align:center; 
 
    top:50%; 
 
    left:0; 
 
    width:100%; 
 
    transform:translateY(-50%); 
 
    background:lightblue; 
 
    }

<div class="col-md-3 portfolio-item"> 
 
    <a href="#"> 
 
    <img class="img-responsive" src="http://placehold.it/100x100" alt="starter" /> 
 
    <h2> Starter</h2> 
 
    </a> 
 
</div>

來源

2015-08-18 07:02:16

我把h2放在一個覆蓋父母完整100％的範圍內。我給了這個顯示錶格單元格。

:before類可確保父級實際拉伸到100％，因此您可以垂直居中。

<div class="col-md-3 portfolio-item"> 
    <a href="#"> 
     <img class="img-responsive" src="http://www.blackfeathers.nl/Testbeeld.jpg" alt="starter"> 
     <span> 
      <h2> Starter</h2> 
     </span> 
    </a> 
</div>

CSS

a { 
    position: relative; 
    display: block; 
    text-align: center; 
    } 
span { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
} 
span:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
h2 { 
    display: inline-block; 
    vertical-align: middle; 
}

Fiddle

來源

2015-08-18 07:06:35 timo

對齊標題標籤圖像

回答

相關問題