对齐标题标签图像

的中心，我有我的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

对齐标题标签图像

回答

相关问题