通过jquery获取图像中心的文本_Jquery_Html

通过jquery获取图像中心的文本

jquery html

通过jquery获取图像中心的文本,jquery,html,Jquery,Html,场景是，我想在图像（图像的z索引=-1）上插入一个数字，该数字放在中。我的锚标记中有一个图像。我找到了锚定标记（id=PersonalInfo）的顶部和左侧位置，然后我将的位置设置为适合图像的中心位置。但是数字显示在浏览器窗口的最右侧，略低于图像。我怎样才能把它放在合适的位置。另外，我想知道如何获得任何元素相对于浏览器窗口边框的左上坐标（不包括顶部的工具栏）我为此编写的Jquery代码如下：变量编号=$（“#个人信息”）.attr（“名称”）； var tag1=“”； var tag2

场景是，我想在图像（图像的z索引=-1）上插入一个数字，该数字放在

中。我的锚标记中有一个图像。我找到了锚定标记（id=PersonalInfo）的顶部和左侧位置，然后我将

的位置设置为适合图像的中心位置。但是数字显示在浏览器窗口的最右侧，略低于图像。我怎样才能把它放在合适的位置。另外，我想知道如何获得任何元素相对于浏览器窗口边框的左上坐标（不包括顶部的工具栏）


我为此编写的Jquery代码如下：
变量编号=$（“#个人信息”）.attr（“名称”）；
var tag1=“”；
var tag2=“”；
var内容=tag1+数字+tag2；
$（“#”+number）.html（内容）；
var LinkTop=$（“#PersonalInfo”）.offset（）.top；
var LinkHeight=$（“#PersonalInfo”）.height（）；
变量NumberTop=LinkTop+（LinkHeight/2）；
var NumberLeft=$（“#PersonalInfo”）.offset（）.left+（$（“#PersonalInfo”）.width（）/2）；
$（“#”+number）.offset（{top:NumberTop，left:NumberLeft}）；
div标签：

不需要jQuery

a {
    background: url(http://www.google.nl/images/srpr/logo3w.png);
    height: 95px;
    width: 275px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

}

此示例演示如何将文本放置在图像的中间。

不需要jQuery…

a {
    background: url(http://www.google.nl/images/srpr/logo3w.png);
    height: 95px;
    width: 275px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;

}

此示例演示如何将文本放置在图像的中间。

这里有一个解决方案：

<!doctype html>
<html>
<head>
<title>Center</title>
<style>
#meme {
  background: url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);

  /* same size as background image */
  width: 500px;
  height: 374px;

  text-align: center;
  vertical-align: middle;

  /* You need this to make vertical-align work the way you want it to. */
  display: table-cell;

  /* Make this example look pretty. */
  color: white;
  font-size: 48pt;
  font-family: Impact, sans-serif;
}
</style>
</head>
<body>

<div id="meme">
  I NOM YOUR FACE
</div>

</body>
</html>

<!doctype html>
<html>
<head>
<title>Center</title>
<style>
#meme {
  background: url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);

  /* same size as background image */
  width: 500px;
  height: 374px;

  /* #meme-text will be positioned relative to this */
  position: relative;
}

#meme-text {
  /* The height of this element will be approximate 60px too,
   * assuming the content will fit on one line.
   */
  font-size: 60px;

  /* Center vertically <- This is the tricky part. */
  position: absolute;
  top: 157px;  /* #meme height / 2 - height of this element */

  /* Center horizontally */
  text-align: center;
  width: 100%;

  /* Make this example look pretty. */
  color: white;
  font-family: Impact, sans-serif;
}
</style>
</head>
<body>

<div id="meme">
  <div id="meme-text">I NOM YOUR FACE</div>
</div>

</body>
</html>


居中
#模因{
背景：url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);
/*与背景图像大小相同*/
宽度：500px；
身高：374px；
文本对齐：居中；
垂直对齐：中间对齐；
/*您需要这样做，以使垂直对齐按您希望的方式工作*/
显示：表格单元格；
/*让这个例子看起来很漂亮*/
颜色：白色；
字号：48pt；
字体系列：影响，无衬线；
}
我在你的脸上涂鸦

这里有一个解决方案：

<!doctype html>
<html>
<head>
<title>Center</title>
<style>
#meme {
  background: url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);

  /* same size as background image */
  width: 500px;
  height: 374px;

  text-align: center;
  vertical-align: middle;

  /* You need this to make vertical-align work the way you want it to. */
  display: table-cell;

  /* Make this example look pretty. */
  color: white;
  font-size: 48pt;
  font-family: Impact, sans-serif;
}
</style>
</head>
<body>

<div id="meme">
  I NOM YOUR FACE
</div>

</body>
</html>

<!doctype html>
<html>
<head>
<title>Center</title>
<style>
#meme {
  background: url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);

  /* same size as background image */
  width: 500px;
  height: 374px;

  /* #meme-text will be positioned relative to this */
  position: relative;
}

#meme-text {
  /* The height of this element will be approximate 60px too,
   * assuming the content will fit on one line.
   */
  font-size: 60px;

  /* Center vertically <- This is the tricky part. */
  position: absolute;
  top: 157px;  /* #meme height / 2 - height of this element */

  /* Center horizontally */
  text-align: center;
  width: 100%;

  /* Make this example look pretty. */
  color: white;
  font-family: Impact, sans-serif;
}
</style>
</head>
<body>

<div id="meme">
  <div id="meme-text">I NOM YOUR FACE</div>
</div>

</body>
</html>


居中
#模因{
背景：url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);
/*与背景图像大小相同*/
宽度：500px；
身高：374px；
文本对齐：居中；
垂直对齐：中间对齐；
/*您需要这样做，以使垂直对齐按您希望的方式工作*/
显示：表格单元格；
/*让这个例子看起来很漂亮*/
颜色：白色；
字号：48pt；
字体系列：影响，无衬线；
}
我在你的脸上涂鸦

因为Richard打败了我，正如bazmegakapa指出的那样，IE7中的表格单元格技巧是失败的，下面是另一个解决方案：

<!doctype html>
<html>
<head>
<title>Center</title>
<style>
#meme {
  background: url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);

  /* same size as background image */
  width: 500px;
  height: 374px;

  text-align: center;
  vertical-align: middle;

  /* You need this to make vertical-align work the way you want it to. */
  display: table-cell;

  /* Make this example look pretty. */
  color: white;
  font-size: 48pt;
  font-family: Impact, sans-serif;
}
</style>
</head>
<body>

<div id="meme">
  I NOM YOUR FACE
</div>

</body>
</html>

<!doctype html>
<html>
<head>
<title>Center</title>
<style>
#meme {
  background: url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);

  /* same size as background image */
  width: 500px;
  height: 374px;

  /* #meme-text will be positioned relative to this */
  position: relative;
}

#meme-text {
  /* The height of this element will be approximate 60px too,
   * assuming the content will fit on one line.
   */
  font-size: 60px;

  /* Center vertically <- This is the tricky part. */
  position: absolute;
  top: 157px;  /* #meme height / 2 - height of this element */

  /* Center horizontally */
  text-align: center;
  width: 100%;

  /* Make this example look pretty. */
  color: white;
  font-family: Impact, sans-serif;
}
</style>
</head>
<body>

<div id="meme">
  <div id="meme-text">I NOM YOUR FACE</div>
</div>

</body>
</html>


居中
#模因{
背景：url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);
/*与背景图像大小相同*/
宽度：500px；
身高：374px；
/*#模因文本将相对于此进行定位*/
位置：相对位置；
}
#模因文本{
/*该元件的高度也大约为60px，
*假设内容适合一行。
*/
字体大小：60px；
/*垂直居中因为Richard击败了我，正如bazmegakapa指出的，表格单元格技巧在IE7中失败了，下面是另一个解决方案：
<!doctype html>
<html>
<head>
<title>Center</title>
<style>
#meme {
  background: url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);

  /* same size as background image */
  width: 500px;
  height: 374px;

  text-align: center;
  vertical-align: middle;

  /* You need this to make vertical-align work the way you want it to. */
  display: table-cell;

  /* Make this example look pretty. */
  color: white;
  font-size: 48pt;
  font-family: Impact, sans-serif;
}
</style>
</head>
<body>

<div id="meme">
  I NOM YOUR FACE
</div>

</body>
</html>

<!doctype html>
<html>
<head>
<title>Center</title>
<style>
#meme {
  background: url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);

  /* same size as background image */
  width: 500px;
  height: 374px;

  /* #meme-text will be positioned relative to this */
  position: relative;
}

#meme-text {
  /* The height of this element will be approximate 60px too,
   * assuming the content will fit on one line.
   */
  font-size: 60px;

  /* Center vertically <- This is the tricky part. */
  position: absolute;
  top: 157px;  /* #meme height / 2 - height of this element */

  /* Center horizontally */
  text-align: center;
  width: 100%;

  /* Make this example look pretty. */
  color: white;
  font-family: Impact, sans-serif;
}
</style>
</head>
<body>

<div id="meme">
  <div id="meme-text">I NOM YOUR FACE</div>
</div>

</body>
</html>


居中
#模因{
背景：url(http://thechive.files.wordpress.com/2010/12/funny-cat-faces-8.jpg?w=500&h=374);
/*与背景图像大小相同*/
宽度：500px；
身高：374px；
/*#模因文本将相对于此进行定位*/
位置：相对位置；
}
#模因文本{
/*该元件的高度也大约为60px，
*假设内容适合一行。
*/
字体大小：60px；
/*垂直居中请始终发布一段代码片段，.链接可能会消失。还有一个注意事项：display:table cell；
在IE 7及更低版本中不起作用。的确，CSS2，但我们需要考虑未来，而不是过去：-）这里的优秀文章：我同意，但对于一些人来说，如果他们只是复制粘贴，可能是有用的信息，并想知道出了什么问题。请始终发布一段代码片段，.Links可能会消失。还有一个注意事项：display:table cell；
在IE 7及更低版本中不起作用。的确，CSS2，但我们需要考虑未来，而不是过去：-）这里有一篇优秀的文章：我同意，但对于一些人来说，如果他们只是复制粘贴并想知道出了什么问题，这可能是有用的信息。@richard，我知道n的原因“我不想使用字体，但也许你应该扩展你的评论，说明为什么不使用字体，因为Karan似乎不知道。@Richard:为什么我不应该使用标记？有没有其他替代方法？（在IE6中可以使用）@richard，我知道为什么不使用字体，但也许你应该扩展你对为什么不使用字体的评论，因为Karan似乎不知道。@richard：为什么我不应该使用标签？有什么替代方法吗？（在IE6中适用）@理查德：是的，但那不是问题的一部分：P。@理查德：是的，但那不是问题的一部分：P。