So I have a div, inside that i have horizontally aligned divs, in this example just 1. Within this horizontal div are 3 divs, one aligned to the left, one middle and one right. I want the images within each of those 3 divs to be centered so it is more visually appealing.
I have tried: margin: 0 auto; but it didn't work, any ideas why this isn't working and how to get it working?
HTML
<div id="main">
<div id="firstRow">
<div class="firEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p>BlahBlahBlah</p>
</div>
<div class="secEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
<div class="thirEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
</div>
CSS
.logo{
width: 100px;
height: 100px;
margin:0 auto;
}
#main{
width: 650px;
height:650px;
margin: 0 0 1em 0;
overflow: auto;
min-width: 650px;
width: 50%;
margin: 0 auto;
background-color:#fff;
}
#firstRow{
width:650px;
min-width:650px;
width: 50%;
margin: 0 auto;
background-color:#CCC;
overflow:hidden;
}
.firEl{
background-color: #FFF;
min-width: 10px;
height: 140px;
width: 100px;
width: 30%;
float:left;
margin: 10px;
}
.secEl{
background-color: #FFF;
min-width: 10px;
height: 140px;
width: 100px;
width: 30%;
margin: 10px;
float:left;
}
.thirEl{
background-color: #FFF;
min-width: 10px;
width: 100px;
height: 140px;
width: 30%;
margin: 10px;
float:left;
}
http://jsfiddle.net/genome314/2u695mdu/
Adding this should do the trick:
img {
display: block;
margin: 0 auto;
}
Or just align center as the other answer below stated, if you want to keep your images inline.
set text-align:center for each div that contains the logo.
#firstRow div{
text-align:center;
}
I threw in Nick Solloum's answer and found that the logos were still a little off center towards the bottom. I made all your image classes into one since they had the same values anyway. I fixed this by changing padding-top: to 4% and found it looked much cleaner to me. Here is the adjusted CSS. I hope this helps
HTML
<html>
<body>
<link rel="stylesheet" type="text/css" href='so.css'>
</body>
<div id="main">
<div id="firstRow">
<div class="El">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p>BlahBlahBlah</p>
</div>
<div class="El">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
<div class="El">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
</div>
</html>
CSS
.logo{
width: 100px;
height: 100px;
margin:0 auto;
}
#main{
width: 650px;
height:650px;
margin: 0 0 1em 0;
overflow: auto;
min-width: 650px;
width: 50%;
margin: 0 auto;
background-color:#fff;
}
#firstRow{
width:650px;
min-width:650px;
width: 50%;
margin: 0 auto;
background-color:#CCC;
overflow:hidden;
}
.El{
background-color: #FFF;
min-width: 10px;
width: 100px;
height: 140px;
width: 30%;
margin: 10px;
float:left;
padding-top: 4%;
}
img {
display: block;
margin: 0 auto;
}
Give text-align:center; in each div css
like:
.firEl{
text-align:center;
}
Edit
if, text don't want center then:
.elPara{
text-align:left;
}
Check your updated code here. Fiddle
Method 1
Add display block to .logo. Check here: http://jsfiddle.net/2u695mdu/4/
CSS
.logo{
width: 100px;
height: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}
#main{
width: 650px;
height:650px;
margin: 0 0 1em 0;
overflow: auto;
min-width: 650px;
width: 50%;
margin: 0 auto;
background-color:#fff;
}
#firstRow{
width:650px;
min-width:650px;
width: 50%;
margin: 0 auto;
background-color:#CCC;
overflow:hidden;
}
.firEl{
background-color: #FFF;
min-width: 10px;
height: 140px;
width: 100px;
width: 30%;
float:left;
margin: 10px;
}
.secEl{
background-color: #FFF;
min-width: 10px;
height: 140px;
width: 100px;
width: 30%;
margin: 10px;
float:left;
}
.thirEl{
background-color: #FFF;
min-width: 10px;
width: 100px;
height: 140px;
width: 30%;
margin: 10px;
float:left;
}
HTML
<div id="main">
<div id="firstRow">
<div class="firEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p>BlahBlahBlah</p>
</div>
<div class="secEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
<div class="thirEl">
<img class="logo" src="http://upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg"></img>
<p class="elPara">BlahBlahBlahBlahBlah</p>
</div>
</div>
</div>
Only the image is centered.
Method 2
Add <div align="center"> before each image, as here: http://jsfiddle.net/2u695mdu/7/
Method 3
Check #ketan answer.
Method 4
Because you setted the image width, you can use, postion relative to images as here http://jsfiddle.net/2u695mdu/8/
.logo{
width: 100px;
height: 100px;
position: relative;
left: 50%;
margin-left: -50px;
}
display: block;
margin: auto;
instead of
margin:0 auto;
Related
How can I remove the image's margin from the clickable region, without interfering in the layout of the page?
#logo{
width: auto;
min-height: 80px;
margin: 30px;
height: auto;
box-sizing: border-box;
text-aligh:center;
}
.img1 {
width: 200px;
height: 105px;
}
.img2 {
width: 200px;
height: 105px;
margin-left: 15px;
}
.img3 {
width: 200px;
height: 105px;
margin-left: 15px;
}
<div id="logo"><img class="img1" src="Photos/m.png"/>
<img class="img2"src="Photos/u.png" alt="U"/>
<img class="img3" src="Photos/p.png" alt="P"/>
</div>
15px on the lower left site img2 and img3 can be clicked.
Put the margin to the A tag instead of IMG:
#logo{
width: auto;
min-height: 80px;
margin: 30px;
height: auto;
box-sizing: border-box;
text-align:center;
}
.img1 {
width: 200px;
height: 105px;
}
.img2 {
width: 200px;
height: 105px;
}
.a2, .a3 {
margin-left: 15px;
}
.img3 {
width: 200px;
height: 105px;
}
<div id="logo"><img class="img1" src="Photos/m.png"/>
<a class="a2" href="U"><img class="img2"src="Photos/u.png" alt="U"/></a>
<a class="a3" href="/#"><img class="img3" src="Photos/p.png" alt="P"/></a>
</div>
This simplifies your CSS declarations a bit too. In lieu of setting the margin as you had it, this sets it on <a> elements.
#logo{
width: auto;
min-height: 80px;
margin: 30px;
height: auto;
box-sizing: border-box;
text-aligh:center;
}
.img {
width: 200px;
height: 105px;
}
a:not(:first-of-type) {
margin-left: 15px;
}
<div id="logo">
<img class="img" src="Photos/m.png"/>
<img class="img"src="Photos/u.png" alt="U"/>
<img class="img" src="Photos/p.png" alt="P"/>
</div>
The image element can be centered levelly with margin:0px 50px 0px 50px;.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0px 50px 0px 50px;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
In the situation, margin:0 auto; == margin:0px 50px 0px 50px;.
So it is equal to write margin:0px 50px 0px 50px; as margin:0 auto;.
Why it can't be centered with margin:0 auto;?
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0 auto;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
You miss display:block
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
.img1 {
margin: 0 auto;
display: block
}
<div class="wrapper">
<img class="img1" src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
I'm sure there are better / more efficient ways of doing this. but...
This is what I use for centering images inside a div both vertically and horizontally while maintaining the div's fixed dimensions. The images are never cropped / stretched.
body {
text-align: center;
margin: 0 auto;
}
.my-image-parent {
margin:1em auto;
width: 350px;
max-width:100%;
height: 200px;
line-height: 200px; /* should match your div height */
text-align: center;
font-size: 0;
background: #131418;
}
/*fluff */
.bg1 {background: url(https://unsplash.it/799/799);}
.bg2 {background: url(https://unsplash.it/800/400);}
.bg3 {background: url(https://unsplash.it/400/800);}
/* end fluff */
.my-image {
width: auto;
height: 100%;
vertical-align: middle;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
<h4>Works for square, landsacape and portrait images.</h4>
<div class="my-image-parent">
<div class="my-image bg1"></div>
</div>
<br>
<div class="my-image-parent">
<div class="my-image bg2"></div>
</div>
<br>
<div class="my-image-parent">
<div class="my-image bg3"></div>
</div>
Since img tag is an inline-block element, margin: 0 auto; will not work. Its display property has to be set to display: block;.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
}
img {
margin: 0 auto;
display: block;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
You can also add text-align: center; for the outer wrapper to center the image.
.wrapper {
width: 175px;
height: 100px;
border: 1px solid red;
text-align: center;
}
<div class="wrapper">
<img src="http://i.imgur.com/9OIT14w.jpg" alt="">
</div>
Edit:
Inline and inline-block elements do not have a width property, and so the "auto" cannot be calculated.
Reference : Why centering with margin 0 auto works with display:block but does not work with display:inline-block ?
I have 1 Div with width 80% and i want to have Boxes in there but i want them centered every time and doesn't matter what width the outer div has.
.kachel_wrapper {
margin: auto auto;
width:80%;
background:orange;
min-height:450px;
margin-top:70px;
}
.kachel {
height:180px;
width:180px;
margin-top:20px;
float:left;
margin: auto auto;
margin-top:15px;
margin-left:10px;
background:#6e7176;
}
<div class="kachel_wrapper">
<div class="kachel"></div>
<div class="kachel"></div>
<div class="kachel"></div>
</div>
How can i fix this problem? And get them width centered ?
Simply display the .kachel divs inline-block and set .kachel_wrapper to text-align:center;:
.kachel_wrapper {
margin: auto auto;
width: 80%;
background: orange;
min-height: 450px;
margin-top: 70px;
text-align: center;
}
.kachel {
height: 180px;
width: 180px;
margin-top: 20px;
margin-top: 15px;
margin-left: 10px;
background: #6e7176;
display: inline-block;
}
<div class="kachel_wrapper">
<div class="kachel"></div>
<div class="kachel"></div>
<div class="kachel"></div>
</div>
I'm not sure if you want the divs centered vertically or horizontally. If you want them centered horizontally go with #Jacob Gray's answer. If you want them centered vertically, remove float: left; from .kachel and add display: block; then to center add margin-left: auto; and margin-right: auto;:
.kachel_wrapper {
margin: auto auto;
width: 80%;
background: orange;
min-height: 450px;
margin-top: 70px;
}
.kachel {
display: block;
height: 180px;
width: 180px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
margin-bottom: 10px;
background: #6e7176;
}
<div class="kachel_wrapper">
<div class="kachel"></div>
<div class="kachel"></div>
<div class="kachel"></div>
</div>
I have the following HTML and CSS code setting two pictures side by side and should shrink when pages shrinks, but this doesn't work.
I got rid of every class on parent divs, but still nothing...
Any idea why pictures do not shrink when browser window shrinks??
Thanks
.align {
position: absolute;
top: 75px;
z-index: -100;
}
.navigate {
margin: -10px 888px;
width: 200px;
z-index: 100;
}
.leftSide {
height: 558px;
margin: 20px 0px 0px 344px;
max-width: 500px;
}
.rightSide {
height: 558px;
margin: -5px 0px 0px 1053px;
max-width: 500px;
}
.verticalLine {
width: 1px;
background-color: red;
height: 558px;
margin: -557px 940px;
}
img {
width: 70%;
height: auto;
}
<div class="align">
<div class="navigate"> <a id="prevPic" href="#"><< Prev</a>
<a id="nextPic" href="#">Next>></a>
</div>
<div class="leftSide">
<img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
</div>
<div class="verticalLine"></div>
<div class="rightSide">
<img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
</div>
</div>
.align {
margin-left:auto;
margin-right:auto;
}
.container{
width:90%;
height:568px;
display:inline-block;
}
.navigate {
width: 100%;
text-align:center;
padding:20px;
}
.leftSide {
margin:0;
height: auto;
max-height:100%;
width:49%;
text-align:center;
display:inline-block;
}
.rightSide {
margin:0;
height: auto;
max-height:100%;
width:49%;
text-align:center;
display:inline-block;
}
.verticalLine {
width: 1px;
background-color: red;
height: 558px;
display:inline-block;
}
.leftSide img {
width:auto;
max-width:100%;
}
.rightSide img {
width:auto;
max-width:100%;
}
<div class="align">
<div class="container">
<div class="navigate"> <a id="prevPic" href="#"><< Prev</a> <a id="nextPic" href="#">Next>></a> </div>
<div class="leftSide"> <img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
<div class="verticalLine"></div>
<div class="rightSide"> <img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
</div>
</div>
add these two attributes to the div class,
.div_class
{
margin-left: auto;
margin-right: auto;
}
I created a link to an ID that should send the user to a div located somewhere at the top of the same page.
when clicking this link, it does jump to the #id, but everything inside the containing div of that id, gets truncated.
EDIT:
Ok, here's a fiddle
CSS:
#header {
width: 1080px;
min-height: 80px;
position: relative;
background-color: #badaf6;
margin-left: auto;
margin-right: auto;
}#container {
width: 1080px;
min-height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border-bottom: 0;
overflow: hidden;
background-color: #FDFDFD;
}
#left {
float: left;
width: 700px;
min-height: 700px;
background-color: #fff;
}
#marg {
margin: 11px 20px 10px 18px;
}
#right {
float: left;
width: 380px;
min-height: 700px;
background-color: #fff;
}
#left #box {
margin-top: 0;
margin-left: 0;
background-color: #ECF4FD;
width: 500px;
height: 200px;
}
#left, #middle, #right {
padding-bottom: 999999px;
margin-bottom: -999999px;
}
#space {
margin: 30px 0 40px 4px;
}
HTML:
<body>
<div id="header">
</div>
<div id="container">
<div id="left">
<div id="space">
<div id="box">
</div>
<p><a href="#box">Click</p>
</div>
</div>
<div id="right">
</div>
<br style="clear: left;" />
</div>
</body>
If its okay, you can change your html like this http://jsfiddle.net/xx6jgLsj/1/
<p><a href="#left">Click</p>