CODEWITHSUNDEEP
htmlcssimagealignmentcenter
user3820615
user3820615

Reputation: 27

centering images with next to each other in html

I have 3 images which is i want all the images to be center of the page after my horizontal line

here is the code

<div class="footer">
    <hr>
    <p id="socmed">Connect Socially With Us:</p>
    <img id="fb" border="0" src="image/fb.png" alt="Facebook Fan Page" align="center">
    <img id="twitter" border="0" src="image/twitter.png" alt="Facebook Fan Page" align="center">
    <img id="youtube" border="0" src="image/youtube.png" alt="Facebook Fan Page" align="center">
    <hr>
</div>

hr{
    border: 0;
    height: 5px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

i'm trying to use align function but it does not give any effect

is there a way to align these 3 images to be centered and next to each other?

thank you

Upvotes: 0

Views: 778

Answers (3)

KR12
KR12

Reputation: 131

Use this

.footer{text-align:center;}

Upvotes: 1

Tuğrul
Tuğrul

Reputation: 372

Give `text-align:center" CSS styling to your footer.

 .footer{text-align:center;}

Upvotes: 0

Mark Silverberg
Mark Silverberg

Reputation: 1259

One way to do this is to wrap the imgs in a p tag and set that p tag to text-align:center; like so:

<div class="footer">
    <hr>
    <p id="socmed">Connect Socially With Us:</p>
    <p class="center">
    <img id="fb" border="0" src="image/fb.png" alt="Facebook Fan Page">
    <img id="twitter" border="0" src="image/twitter.png" alt="Facebook Fan Page">
    <img id="youtube" border="0" src="image/youtube.png" alt="Facebook Fan Page">
     </p>
    <hr>
</div>


p.center{ text-align:center; }

JS Fiddle: http://jsfiddle.net/9fBtf/2/

Upvotes: 0

Related Questions