Question

这是我尝试将文本放置在锚点中的图像下方的示例代码。我有问题，如果html中有更多的元素，浏览器是最小化的图像和文本将错过对齐

output-'Text'以及图像下方的图像和文本都应该是align'center'，即使浏览器最小化，它们也应保持对齐。

<head>
  <style type="text/css">
    .cImg {
      width:100%; 
      text-align:center;
    }
    .cImga {
      display:block;
      margin-top:5%;
    }
    .cImgimg {
      position:absolute;
      top:10px;
      bottom:0px;
      right:48%     
    }
  </style>
</head>
<html>
<body>
  <div class="cImg">Text</duiv>
  <div class="cImg">
    <a >
      imageTag/Call us
    </a>
  </div>
</body>
</html>

Answer 1

您的宽度，填充和边距需要以像素为单位。

Answer 2

您需要修复HTML和CSS。

在CSS中，您的样式规则被混合在一起并且无法正常工作。您的HTML至少有一个div未正确关闭。

此外，在您的CSS中，您不应该定位img absolutely。这可能会导致您的问题。

我简化了你的HTML和CSS。这应该有用。

<div class="cImg">
    Text<br />
    <a><img src-"" /><br />
        Call us</a>
</div>

.cImg {
   width:100%; 
   text-align:center;
 }
 .cImg a {
   display:block;
   margin-top:5%;
 }

http://jsfiddle.net/jasongennaro/B2nXe/

如何使用锚标记对齐文本和图像

2 个答案: