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/
精彩评论