This is a problem I had a lot of trouble with: I can't center my divs properly on my webpage. The situation is as follows: the div I'm trying to center is in another div. After a lot of research and hundreds of ways that failed, I managed to center it. However, when I then make the viewport smaller than the div, it suddenly doesn't center anymore and floats to the left. I only have this problem with unordered lists (navigations) in divs.
Here is the code of my webpage (simplified) and on JSBin:
<body>
<div id="container">
<header id="topheader">
...
</header>
<div id="content">
...
<div id="images">
<ul>
<li><img src="..."></li>
<li><img src="..."></li>
<li><img src="..."></li>
<li><img src="..."></li>
</ul>
</div>
...
</div>
</div>
</body>
The problem is with the images div. There is also a similar thing somewhere else on the page.
My question is: why is it doing this, and how can it be solved?
margin:0 auto; center's the div, not the content....what i mean to say is, that if your div is 60px wide and content is only 30px wide, then the div will align to center but the content will still align to one-side of the div, not in the center, giving a view that div is not centered.....my suggestion is to use text-align property too with margin
see this DEMO and notice the border to understand that the div is centerd....but content is not~
CSS
#content {
width:98%;
margin:0 auto;/*center div*/
border:1px solid #000;
}
#images {
width:98%;
margin:0 auto;/*center div*/
border:1px solid #CCC;
text-align:center /*center text*/
}
Related
I am attempting to center align an image carousel in a wordpress webpage. I tried this line of code in Custom CSS from the panel menu and it did not work for me:
.cleaning_carousel {width: 50% !important; margin: 0px auto !important;}
To see the site in question, visit https://livingwatersict.com/ponds/
Can someone point out the mistakes that I am making?
you can try something like this make an outer div and use css text-align:center
.outer
{
text-align:center;
}
.inner
{
width:300px;
height:auto;
}
<div class="outer">
<img src="http://www.team-bhp.com/forum/attachments/travelogues/412228d1282577980-taj-mahal-full-moon-fatehpur-sikri-mathura-bharatpur-keoladeo-national-park-img_9119_20_21_tonemappedb.jpg" class="inner">
</div>
I have a div that I am using as a "sidepanel" that has a width:100% and position:fixed. this sidepanel houses my navigation. I also have another div that is named "content". it has a width of 600px and I have used to "margin-left:auto, margin-right:auto" to centre it in between the sidepanel and the edge of the page.
But the problem is that it the two divs are overlapping. how do I stop it from overlapping?
I have included the HTML and CSS coding below.
HTML
<body>
<div id="leftpanel">
<div id="nav">
<ul>
<li>home</li>
<li>the future</li>
<li>contact details</li>
</ul>
</div>
</div>
<div id="content">
<div id="header">
<p><img src="images/haroon-ahmed.png" class="imgaligncentre"/></p>
</div>
</div>
</body>`
CSS
#leftpanel {
float:left;
height:100%;
width:320px;
postion:fixed;
}
#content {
width:600px;
padding-top:50px;
padding-bottom:50px;
margin-right:auto;
margin-left:auto;
}
This is how you can stop them from overlapping.
DEMO
#content {
margin-left: 320px;
}
When you use position:fixed;, it means that element does not care about the other elements on the page. It does not care if it's touching them, over them, underneath them. It only cares about it's position relative to the window (ie: the user's screen).
So because your #leftpanel is on the very left side, and has width of 320. Just set a margin-left of the #content to 320px.
Okay I have tried to center this responsive image using the vertical-align and text-align property with no luck. Can someone tell me what I'm doing wrong. I want the image to be vertically and horizontally in the middle of the page.
<div class="circle">
<div class="bl-circle" style="z-index:9999;">
<a href="http://www.leedsrush.com"><img src="images/Circular.png" onmouseover="this.src='images/leeds.png'" onmouseout="this.src='images/Circular.png'" style="width:100%; height:100%;"/>
</a>
</div>
</div>
.bl-circle{
position: absolute;
max-width:250px;
max-height:250px;
height:100%;
width:100%;
margin-left:auto;
margin-right:auto;
}
.circle{
}
I would check out this tutorial:
http://pmob.co.uk/pob/hoz-vert-center.htm
This is what I use when I am trying to center an element in my page. Works like a charm every time, especially the example at the bottom when're you don't know the width and height of the element.
I know I'm missing something obvious here... the DIV has a fixed width, the image has a fixed width, this should be a snap...
<style>
.featured {margin:0 auto;}
</style>
<div style='width:300px;border:solid 1px red;'>
<img src='http://www.musicalads.co.uk/img/articles/image_64.jpg'
class='featured' style='width:186px;height:215px;'>
</div>
You can play with it here: http://jsfiddle.net/AHjAk/
You'll also need to add display: block; to the image if you plan on centering it using auto for its left/right margins
http://jsfiddle.net/AHjAk/1/
or try this simple text-align:center; the container
http://jsfiddle.net/AHjAk/2/
<div style='width:300px;border:solid 1px red;text-align:center'>
<img src='http://www.musicalads.co.uk/img/articles/image_64.jpg' class='featured'>
</div>
Try adding text-align:center to the parent gif that should center the image.
<style>
.featured {margin:0 auto;}
</style>
<div style='width:300px;border:solid 1px red;text-align:center'>
<img src='http://www.musicalads.co.uk/img/articles/image_64.jpg'
class='featured' style='width:186px;height:215px;'>
</div>
And if you want to center that parent div itself, your body needs a text-align:center.
I am trying to place a child div over the top of its parent div (including its content)
<div id="footer">
<div id="footer-container">
<div id="icon"></div>
</div>
</div>
#footer {
height:50px;
border-top:3px #666 solid;
margin-top:50px;
}
#footer-container {
height: 30px;
width: 300px;
margin-left: auto;
margin-right: auto;
margin-top: -15px;
}
#icon {
height:30px;
width:30px;
background-color:#666;
}
Now it works if the content of <div id="icon"> is text but if you place a background image in the div it does not. Is there any way to make this work? This maybe explains it better
http://jsfiddle.net/4QxL7/
EDIT
Apologies. It was working all along. I was using PNG's for the images which have 'white-space' in the middle which made the border (which is the same color) in the parent div look like it was going over the top of the child, its is in fact it is going behind.
Thanks for your help
I just tried two methods and they both worked using an oversized image from my site...
<div id="footer">
<div id="footer-container">
<div id="icon"><img src="image url here" width=30 height=30/></div>
</div>
</div>
http://jsfiddle.net/ZkxSM/
and
#icon {
height:30px;
width:30px;
background-color:#666; /*unnecessary now probably...*/
background:url('image url here');
}
http://jsfiddle.net/b6QyX/ (image needs to be resized before hand for this to work maybe... or width and height can be set in the html of the div)
There's nothing actually wrong with your jsfiddle..
Apologies. It was working all along. I was using PNG's for the images which has 'white-space' in the middle which made the border (which is the same color) in the parent div look like it was going over the top of the child, its is in fact it is going behind.
Thanks for your help