无法将图像中心文字 [英] Unable to center text on image

查看：110
本文介绍了无法将图像中心文字的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个特定的设置，允许并排设置4个图像，并以列表格式作出响应。



我想要一个带背景的标题匹配与文字相同的高度并延伸到图像的宽度，当被徘徊时垂直和水平居中。

我已经阅读了大量文章，其中绝对/相对位置被使用，但我不能让它在我的代码中工作。我尝试了垂直对齐，文本中心，顶部，左侧，宽度，但文本仍然保留在图片的底部。



这里有大约10％的链接我点击了：


  1. 水平居中放置图片上的文字通过CSS

  2. 响应带有文字覆盖图的图片

  3. 居中放置东西

  4. 不带绝对位置的图片文字
    5. li>
  5. 如何在没有绝对定位的情况下将图片放在图片上或将图片设置为backbround

  6. 为什么不能在< ul> （绝对位置）在< li> （相对位置）自动大小？

  7. HTML：中心图像标题相对于图像？

我很抱歉这篇长文章（它的所有代码都只是跳过了jsfiddle的代码） / p>

我的当前设置这里是jsFiddle ：

HTML： 

 < ul class =tab> 
< li> 
< a class =tabimg gq-module-hover tilttabindex =0data-about =Newborns>< img src =http://debora.com.au/wp- content / uploads / 2016/11 / DEB_0095.jpgalt =>新生儿< / a> 
< / li> 
< li> 
 < / li> 
< li> 
 < / li> 
< li> 
< a class =tabimg gq-module-hovertabindex =3data-about =生活方式>< img src =http://debora.com.au/wp-content /uploads/2016/11/DEB_6620.jpgalt =>生活方式< / a> 
< / li> 
< / ul>

CSS：

/ *样式列表* /
ul.tab {
whitespace：nowrap;
宽度：100％;
list-style-type：none;
保证金：0;
padding：0;
overflow：hidden;
text-align：center;
}

/ *样式a标签* /
ul.tab li a {
display：inline-block;
颜色：黑色;
text-align：center;
text-decoration：none;
转换：0.3s;
font-size：17px;
-webkit-filter：灰度（50％）; / * Safari 6.0 - 9.0 * /
filter：灰度（50％）;
}

/ *更改悬停链接的背景颜色* /
ul.tab li a：hover {
background-color：＃000000;
-webkit-transform：scale（1.1，1.1）;
transform：scale（1.1，1.1）;
box-shadow：1px 5px 14px rgba（0，0，0，3）;
z-index：1;
-webkit-filter：灰度（0％）; / * Safari 6.0 - 9.0 * /
filter：灰度（0％）;
}


/ *创建一个活动/当前tablink类* /
ul.tab li a：focus，.active {
background-color ：#ccc;
-webkit-filter：灰度（0％）; / * Safari 6.0 - 9.0 * /
filter：灰度（0％）;
}


/ *样式选项卡内容* /
.tabcontent {
display：none;
padding：6px 12px;
border：1px solid #ccc;
border-top：none;
}


/ *样式图片* /
.tabimg {
box-sizing：border-box;
}

.tab {
font-size：0; / *为了摆脱li标签下方的空间* /
display：inline-block;
/ *将其更改为显示：block;为了使容器与页面一样宽* /
box-sizing：border-box;
overflow：hidden;
/ *清除浮动* /
}

.tab li {
box-sizing：border-box;
float：left;
宽度：25％;
}

.tab li a {
width：100％; / *如果您不希望图像调整大小（如果容器与页面一样宽）（如果.tab是display：block; *）* /
}

.tab li img {
width：100％;
display：block;
box-sizing：border-box;
}

Javascript $ b 

  / *简单的foreach，因为js foreach方法不被IE9支持，你可能想要支持它。 
 CanIUse：http://caniuse.com/#search=foreach * / 
函数simpleForEach（array，callback）{
 for（var i = 0; i< array.length; i ++）{
 callback（array [i]，i）; 
} 
} 
 
 / *部分内容可以使用纯CSS完成。 
这个函数应该在加载时执行：
 document.addEventListener（load，load）; 
或DOMContentLoaded：
 document.addEventListener（DOMContentLoaded，load）; 
 CanIUse：http://caniuse.com/#search=DOMContentLoaded。 * / 
 
 jQuery（document）.ready（function（）{
 var tabimgs = document.getElementsByClassName（tabimg）; 
 
 //对于每个tabimg 
 simpleForEach（tabimgs，function（tabimg）{
 var cityName = tabimg.getAttribute（data-about）; 
 
 //添加click事件监听器
 tabimg.addEventListener（click，function（evt）{
 // onclick do：
 
 //隐藏所有tabcontents 
 simpleForEach（document.getElementsByClassName（tabcontent），函数（tc）{
 tc.style.display =none; 
}）; 
 
 //移除活动类
 simpleForEach（document.getElementsByClassName（ tabimg），function（ti）{
 ti.className = ti.className.replace（active，）; 
}）; 
 
 //显示当前选项卡，并将活动类添加到打开该链接的链接tab 
 document.getElementById（cityName）; 
 tabimg.className + =active; 
}）; 
}）; 
}）;

请真诚感谢您的帮助/指导。谢谢你。



因为你错过了它： https://jsfiddle.net/74n5qf3q/1/

解决方案

这是我的修复： https://jsfiddle.net/JustusFT/jrhk8L7j/

我用这个技巧来居中它。 https://www.w3.org/Style/Examples/ 007 / center.en.html＃hv3



我将缩略图的位置：设置为相对。这将导致基于父级定位的绝对定位子元素。
新HTML：

 < ul class =tab> 
< li> 
 < img src =http://debora.com.au/wp-content/uploads/2016/11/DEB_0095.jpgalt => 
< div class =caption>新生儿< / div> 
< / a> 
< / li> 
< li> 
 < div class =caption>儿童< / div> 
< / a> 
< / li> 
< li> 
 < div class =caption>家庭< / div> 
< / a> 
< / li> 
< li> 
< a class =tabimg gq-module-hovertabindex =3data-about =生活方式>< img src =http://debora.com.au/wp-content /uploads/2016/11/DEB_6620.jpgalt => 
< div class =caption>生活方式< / div> 
< / a> 
< / li> 
< / ul>

CSS： 

  .tab li {
 box-sizing：border-box; 
 float：left; 
宽度：25％; 
职位：亲属; 
 / *新增* / 
} 
 .tab li .caption {
 position：absolute; 
 top：50％; 
剩下：50％; 
 transform：translate（-50％，-50％）; 
}

我还删除了的所有实例text-align：中心;


I have a particular setup that allows 4 images set side by side and to act responsively in a list format.

I am trying to have a caption with a background matching the same height as the text and extending to the width of the image, to be centered vertically and horizontally when hovered.

I have read numerous articles where position absolute/relative is used, but I can't get it working in my code. I tried vertical align, text-center, top, left, width, but the text still remains at the bottom of the image.

Here is about 10% of the links I have clicked on:

  1. Horizontal centering text over image via CSS
  2. Responsive image with text overlay
  3. Centering things
  4. Text over image without absolute position
  5. How to put text over an image without absolute positioning or setting the image as backbround
  6. Why can't an <ul> (with absolute position) inside a <li> (with relative position) auto size?
  7. HTML: center image caption relative to image?

I am sorry for the long post (Its's all the code so just skip the code to the jsfiddle).

My currrent setup Here is a link to the jsFiddle:

HTML:

<ul class="tab">
    <li>
        <a class="tabimg gq-module-hover tilt" tabindex="0" data-about="Newborns"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_0095.jpg" alt="">Newborns</a>
    </li>
    <li>
        <a class="tabimg gq-module-hover" tabindex="1" data-about="Children"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_8252.jpg" alt="">Children</a>
    </li>
    <li>
        <a class="tabimg gq-module-hover" tabindex="2" data-about="Families"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_8607.jpg" alt="">Families</a>
    </li>
    <li>
        <a class="tabimg gq-module-hover" tabindex="3" data-about="Lifestyle"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_6620.jpg" alt="">Lifestyle</a>
    </li>
</ul>

CSS:

/* Style the list */
ul.tab {
  whitespace: nowrap;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}

/* Style the a tags */
ul.tab li a {
  display: inline-block;
  color: black;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
  -webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
  filter: grayscale(50%);
}

/* Change background color of links on hover */
ul.tab li a:hover {
  background-color: #000000;
  -webkit-transform: scale(1.1, 1.1);
  transform: scale(1.1, 1.1);
  box-shadow: 1px 5px 14px rgba(0, 0, 0, 3);
  z-index: 1;
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}


/* Create an active/current tablink class */
ul.tab li a:focus, .active {
  background-color: #ccc;
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}


/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}


/*style the images*/
.tabimg {
  box-sizing: border-box;
}

.tab {
  font-size: 0; /* To get rid of the space below the li tags */
  display: inline-block;
  /* change this to display: block; in order to make the container as wide as the page is */
  box-sizing: border-box;
  overflow: hidden;
  /* to clear the float */
}

.tab li {
  box-sizing: border-box;
  float: left;
  width: 25%;
}

.tab li a {
  width: 100%; /* remove this if you dont want the images to resize if the container is as wide as the page (if .tab is display: block;*) */
}

.tab li img {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

Javascript

    /* Simple foreach as the js foreach method is not supported by IE9 and you may want to support it.
CanIUse: http://caniuse.com/#search=foreach */
function simpleForEach(array, callback) {
    for (var i = 0; i < array.length; i++) {
            callback(array[i], i);
    }
}

/* Parts of this can be done with pure css.
This function should executed on load:
    document.addEventListener("load", load);
or on DOMContentLoaded:
    document.addEventListener("DOMContentLoaded", load);
CanIUse: http://caniuse.com/#search=DOMContentLoaded. */

jQuery(document).ready(function(){
    var tabimgs = document.getElementsByClassName("tabimg");

    // for each tabimg
    simpleForEach(tabimgs, function(tabimg) {
            var cityName = tabimg.getAttribute("data-about");

            // add the click event listener
            tabimg.addEventListener("click", function(evt) {
                // onclick do:

                // hide all tabcontents
                simpleForEach(document.getElementsByClassName("tabcontent"), function(tc) {
                    tc.style.display = "none";
                });

                // remove the active class
                simpleForEach(document.getElementsByClassName("tabimg"), function(ti) {
                    ti.className = ti.className.replace(" active", "");
                });

                // show the current tab, and add "active" class to the link that opened the tab
                document.getElementById(cityName);
                tabimg.className += " active";
            });
    });
});

I would really appreciate some help/guidance on this one please. Thank you in advance.

Incase you missed it: https://jsfiddle.net/74n5qf3q/1/

解决方案

Here's my fix: https://jsfiddle.net/JustusFT/jrhk8L7j/
I used this technique to center it. https://www.w3.org/Style/Examples/007/center.en.html#hv3

I set the thumbnail's position: to relative. This causes child elements with absolute positioning positioned based on the parent. New HTML:

<ul class="tab">
  <li>
    <a class="tabimg gq-module-hover tilt" tabindex="0" data-about="Newborns">
      <img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_0095.jpg" alt="">
      <div class="caption">Newborns</div>
    </a>
  </li>
  <li>
    <a class="tabimg gq-module-hover" tabindex="1" data-about="Children"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_8252.jpg" alt="">
      <div class="caption">Children</div>
    </a>
  </li>
  <li>
    <a class="tabimg gq-module-hover" tabindex="2" data-about="Families"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_8607.jpg" alt="">
      <div class="caption">Families</div>
    </a>
  </li>
  <li>
    <a class="tabimg gq-module-hover" tabindex="3" data-about="Lifestyle"><img src="http://debora.com.au/wp-content/uploads/2016/11/DEB_6620.jpg" alt="">
      <div class="caption">Lifestyle</div>
    </a>
  </li>
</ul>

CSS:

.tab li {
  box-sizing: border-box;
  float: left;
  width: 25%;
  position: relative;
  /*Added*/
}
.tab li .caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

I also removed all instances of text-align:center;

这篇关于无法将图像中心文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆