CSS魔法为中心文本和IMG为固定的HTML

-1

我有一块固定的HTML这是我无法改变的范围，我想它的样式，以我的喜好，但我无法弄清楚如何。这是我有：CSS魔法为中心文本和IMG为固定的HTML

<a title="some title" href="..."> 
    <img src="....jpg"></img> 
    Some text 
</a>

CSS：

div.container-outer { 
width: 25%; 
float:left; 
} 
div.container-inner { 
width: 156px; 
margin: 5px; 
} 
div.container-inner img { 
max-width: 156px; 
max-height: 124px; 
}

我想IMG下居中的文本，文本和IMG在包含分区固定宽度居中。图像的宽度和高度是未知的，但存在最大宽度和最大高度，并且最大宽度小于包含div。此外，图片的底部应该在包含div的固定位置。

我可以自由修改此代码段的HTML代码。

这甚至可能吗？我已经撞坏我的头在墙上了一个小时，我还是一无所知....

最好的问候，马库斯

编辑130513 ------------- -----------------------------------

添加了当前的CSS。这让我看到图像左对齐，下面的文本也左对齐。如果图像更改高度，则由于图像顶部对齐，所以图像的底部会移动。

来源

2013-05-13 Markus

张贴您的CSS或jsFiddle链接 – lifetimes 2013-05-13 12:22:00

您可以先尝试设置[title〜= some title] img {text-align：center;或边距：0 auto;或者将它们设置为display：block; }你需要给我们一个你从哪里开始的想法。 – Cam 2013-05-13 13:02:41

问题是，如果我做文本对齐：center和img {display：inline}，那么如果图像宽度很小，文本会在图像旁边跳转。 – Markus 2013-05-13 13:24:22

你试过

<div style="text-align:center"> 
    <img src="..." alt="..." /><br /> 
    <span>text<span> 
</div>

可以样式div的在风格PARAM本身的宽度。你需要，因为IMG是喜欢宽松的文本内联对象（文本不换一个P元素或东西在里面的IMG后BR。

的跨度只有在那里，因为你可以后来的风格它

来源

2013-05-13 13:21:54

我不能更改html块文本，它是从我无法访问的代码的PHP输出。我只能在它周围添加html。 – Markus 2013-05-13 13:41:20

到目前为止，我还没有”牛逼成功地做到这一点在CSS ...你可以使用JavaScript

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
     div.container-inner { 
      width: 156px; 
      text-align: center; 
      border: 1px solid red; 
     } 
    </style> 
    <script> 
     function addBr() { 
      document.getElementById('container-inner').innerHTML = document.getElementById('container-inner').innerHTML.replace(/(<img.+?>)/, '$1<br>'); 
     } 
    </script> 
</head> 

<body onload="addBr();"> 
    <div id="container-inner" class="container-inner"> 
     <a title="some title" href="..."> 
      <img src="images/sample.jpg"> 
      Some text 
     </a> 
    </div> 
</body> 

</html>

演示：http://doug.exploittheweb.com/SO/16521934.html

FWIW，</img>是无效的HTML，而且几乎肯定会，即使它的词典定义不存在于.innerHTML是这里的源代码。

来源

2015-11-12 11:41:15

CSS魔法为中心文本和IMG为固定的HTML

回答

相关问题