开发者

how to align text and image with in anchor tag

This is the sample code in which I am try开发者_运维技巧ing to position text below the image in a anchor. I have problems if there are more elements in the html and browser is minimized image and text is going miss aligned

output-'Text' and image and text below the image all should be align'center' and they should stay aligned even if the browser is minimized.

<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>


Your widths, paddings, and margins need to be in pixels.


You need to fix your HTML and your CSS.

In your CSS, your style rules are mashed together and are not working properly. Your HTML has at least one div not properly closed.

Also, in your CSS, you should not position the img absolutely. This could be contributing to your problems.

I've simplified your HTML and CSS. This should work.

<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/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜