-1

我有一段固定的 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 下方居中，并且 text 和 img 都以包含 div 的固定宽度居中。图片的宽度和高度未知，但是有一个max-width和一个max-height，并且max-width小于包含的div。此外，图片的底部应位于包含 div 内的固定位置。

我可以随意修改这个代码片段周围的 html。

这甚至可能吗？在过去的一个小时里，我把头撞在墙上，我仍然一无所知....

最好的问候，马库斯

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

添加了当前的 CSS。这使我的图像左对齐，下面的文本也左对齐。如果图像改变高度，则图像的底部会移动，因为它是顶部对齐的。

4

2 回答 2

0

你有没有尝试过

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

您可以在样式参数本身中设置 div 的宽度。您需要在 img 之后 BR 因为 img 是内联对象，例如松散的文本（文本未包含在 P 元素或其他内容中。

跨度只存在于那里，因为您可以稍后对其进行样式设置

于 2013-05-13T13:21:54.927 回答
0

到目前为止，我还没有设法在 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，不是有效的 HTML，即使它在源代码</img>中也几乎肯定不会出现。.innerHTML

于 2015-11-12T11:41:15.670 回答