How do we center horizontally inside a div an image that we want to be clickable?
HTML:
<div class="logo-wrap">
<img class="logo" src="img/logo.png" width="262" height="53" />
</div>
CSS:
.logo-wrap{
text-align: center;
}
img.logo {
margin-left: auto;
margin-right: auto;
}
I need to put the "a" tag somewhere and give it a proper CSS. Any idea?
My personal preference is to manage it all with css providing more control.
DEMO
HTML
<div class="logo-wrap">
<a class="logo"/>
</div>
CSS
.logo-wrap{
text-align: center;
}
.logo {
background:#68c url('img/logo.png') no-repeat center center;
margin:0 auto;
height:53px;
width:262px;
display:block;
cursor:pointer;
}
<div class="logo-wrap">
<img src="img/logo.png" width="262" height="53" />
</div>
Well, just add an Anchor-Tag around it:
<div class="logo-wrap">
<a href="#">
<img class="logo" src="img/logo.png" width="262" height="53" />
</a>
</div>
JSFiddle
html
<div class="logo-wrap">
<a href="#">
<img class="logo" src="img/logo.png" />
</a>
</div>
css
.logo-wrap{
width:100%;
}
.logo{
width:50%;
display:block;
margin:0 auto;
}
Try this:
img.logo {
vertical-align: middle
}
Related
I'm trying to get 3 divs to align horizontally in my footer. I've tried a bunch of different solutions and have been able to get them very close, but they're just not perfectly aligned.
As of right now, the "biofreeze" element is a bit too high up and the "rocktape" element slightly overlaps the "graston" element. The "graston" element is pretty much exactly where I want it, though.
Playing around with the margins also doesn't seem to work too well.
Here's the code:
#sponsors {
width: 100% vertical-align: top !important;
}
#biofreeze {
float: left;
width: 33%;
}
#graston {
float: left;
width: 33%;
}
#rocktape {
float: left;
width: 33%;
}
<div id="sponsors">
<div id="biofreeze">
<a href="http://www.biofreeze.com/">
<img src="http://placehold.it/200x200" />
</a>
</div>
<div id="graston">
<a href="http://www.grastontechnique.com/home">
<img src="http://placehold.it/200x200" />
</a>
</div>
<div id="rocktape">
<a href="http://www.rocktape.com/">
<img src="http://placehold.it/200x200" />
</a>
</div>
</div>
You might consider using inline-block in this case for different heights. Also, vertical-align won't work for floated elements. Plus, there's no ; before vertical-align, so it won't even affect.
#biofreeze,
#graston,
#rocktape {
display: inline-block;
width: 33%;
vertical-align: top;
}
<div id="sponsors">
<div id="biofreeze">
<a href="http://www.biofreeze.com/">
<img src="http://placehold.it/200x200" />
</a>
</div><div id="graston">
<a href="http://www.grastontechnique.com/home">
<img src="http://placehold.it/200x275" />
</a>
</div><div id="rocktape">
<a href="http://www.rocktape.com/">
<img src="http://placehold.it/200x100" />
</a>
</div>
</div>
Or if you want all these to be aligned middle, you can use vertical-align: middle instead:
#biofreeze,
#graston,
#rocktape {
display: inline-block;
width: 33%;
vertical-align: middle;
}
<div id="sponsors">
<div id="biofreeze">
<a href="http://www.biofreeze.com/">
<img src="http://placehold.it/200x200" />
</a>
</div><div id="graston">
<a href="http://www.grastontechnique.com/home">
<img src="http://placehold.it/200x275" />
</a>
</div><div id="rocktape">
<a href="http://www.rocktape.com/">
<img src="http://placehold.it/200x100" />
</a>
</div>
</div>
100% working code
#sponsors {
width: 100%;
vertical-align: top !important;
overflow:hidden;
border:2px solid grey;
}
#biofreeze{
height:250px;
background-color:#07c;
}
#graston{
height:300px;
background-color:#cc5600;
}
#rocktape{
height:100px;
background-color:#45ba5b;
}
#biofreeze,#graston,#rocktape {
display:inline-block;
float: left;
width: 33%;
}
<div id="sponsors">
<div id="biofreeze">
Height:250px;
</div>
<div id="graston">
Height:300px;
</div>
<div id="rocktape">
Height:100px;
</div>
</div>
I'm trying to centre two buttons but having no luck!
It also has a header image above the buttons within the HTML.
Here's my current HTML:
HTML:
<div>
<img src=".jpg" style="width:700px;display:block;margin-left:auto;margin-right:auto;" alt=""><div class="nav3" style="height:705px;">
<span class="icons"><a href="https://twitter.com/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</span>
<a href="https://www.amazon.co.uk/" class="icons">
<img src=".png" style="width:100px;display:block;margin-left:auto;margin-right:auto;" alt=""></a>
</div>
I revised your code and separate it the inline style from your html code.
div {
text-align: center;
width: 700px;
}
div img{
width:700px;
margin-bottom: 20px;
}
.nav3 img {
width: 100px;
display: inline;
}
<div>
<img src="http://placehold.it/700x260" alt="">
<div class="nav3">
<img src="http://placehold.it/640x260" alt="">
<img src="http://placehold.it/640x260" alt="">
</div>
</div>
Currently, I set the width of div to width: 700px; and the place holder also contains the same width. Modify these width to suit your needs.
I've been trying to center the images within a div on my page.
Relevant HTML:
<div class="imgblock">
<div class="basket slide1"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/basket.jpg" alt="" align="center"/ </div>
<div class="infos"></div>
</div>
</a></div>
<div class="steak slide2"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/steak.jpg" alt="" /></div>
<div class="infos"></div>
</div>
</a></div>
<div class="col1-4 slide3"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/breakfast.jpg" alt="" /></div>
<div class="infos"></div>
</div>
</a></div>
<div class="fish slide4"><a href="#">
<div class="images">
<div class="img-wrap"><img src="images/fish.jpg" alt="" /></div>
<div class="infos"></div>
</div>
</a></div>
</div>
Relevant CSS:
.imgblock {
width:940px;
text-align:center;
vertical-align:middle;
margin:0 10px;
}
In my research I was told to add text-align:center and vertical-align:middle. This didn't work, I also tried margin-left:auto and margin-right:auto.
Thanks for your help.
since your image are floatting, you can only reduce width of .imgblock and use auto margin :
.imgblock {
width:830px;
margin:0 auto;;
}
As #mdesdev has said, the recommended way to center block items is through:
margin: 0 auto;
That goes for your images as well. I would do something like this (untested):
.imgblock img{
display: block;
margin: 0 auto;
}
You could probably do without some of the surrounding div's as well.
you can try
.basket {
margin: 0 10px 0 320px;
width: 300px;
}
So as a newbie web developer I am stuck on how to center all 3 images in the middle of the screen. I read up on it and came across margin:auto;. Tried it, didn't work.
This is the CSS:
<style>
.social
{
float:left;
margin:5px;
}
.main_block
{
margin:auto, auto;
}
</style>
This is the HTML:
<div class="main_block">
<img class="social" src="http://lorempixel.com/400/200/"> <a href="#"><img class="social" src="http://lorempixel.com/g/400/200/" alt="Facebook"> <img class="social" src="http://lorempixel.com/400/200/" alt="Google +"> </a>
</div>
Help is much appreciated.
FIDDLE
You need to display the images as block and then apply margin auto
Also your HTML is not correct:
<div class="main_block">
<div class="ib">
<a href="#">
<img class="social" src="http://lorempixel.com/50/50/" />
</a>
<a href="#">
<img class="social" src="http://lorempixel.com/g/50/50/" alt="Facebook" />
</a>
<a href="#">
<img class="social" src="http://lorempixel.com/50/50/" alt="Google +" />
</a>
</div>
</div>
CSS:
.social
{
float: left;
}
.ib {
display: inline-block;
}
.main_block {
text-align: center;
}
I'm not sure if you wanted them to stack over each other, or just to center them.
Stack them over each other
JSFiddle
To stack them over each other, you want to have position:absolute; in the .social tag, that way they won't try to avoid each other. The problem is, margin:auto; won't work then. The only solution I've found to fix this to to set the left: and right: positions to 1%;.
Just center them
JSFiddle
This one is to just center them. You would just want to use margin-left:auto; and margin-right:auto;. With this, you don't need to use position:absolute;.
You have to set a width on the main-block class and remove the comma.
Your style should look something like this:
.main_block
{
width: 40em;
margin:0 auto;
}
HTML/CSS newbie question for you.
I've been stuck on this for awhile. I'm looking to center my image gallery AND also make the padding between the images tighter. I'm thinking I need a container but, I've just been screwing it all up when I try. Any help would be great!
<div id="container" align="center">
<div class="img">
<a href="#">
<img src="#" alt="PIcture1" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="Images/9700_1915630577543_1314909545_n.jpg" alt="oldman" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="#" alt="Picture3" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
<div class="img">
<a href="#">
<img src="#" alt="Picture4" width="210" height="180">
</a>
<div class="desc">BLAH</div>
</div>
</div>
CSS:
#container{
}
div.img
{
margin:5px;
padding: 5px;
border:none;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:none;
}
div.img a:hover img
{
border:none;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
It depends on how you want to centre your gallery.
There's a few things that you need to bear in mind. In order to centralise some HTML you need to have a set width of the centralising element.
Here's some code for you to work with:
Create a "centre" class in CSS as follows:
div.centre{
margin:0px auto;
width:800px;
}
Then add it to your container as follows:
<div id="container" class="centre">
The secret to centralisation is in the margin:0px auto;, this is convention of modern web development to centralise content.
Have a look at this code
p.s. don't use align="center" it is depreciated in later versions of HTML. Better to not get into the habit of using it and stick to using CSS classes to centralising things for you.
You should not use align. It is a deprecated property. To center something with a container you need to specify a fixed width and add margin auto.
Ex:
#container {
width:970px;
margin: 0 auto;
}
You can remove the padding on div.img