I'm trying to center horizontally a divs in a div with 100% width. The div conteiner is "#post-area" and all divs inside, have a class ".post".
this is the link: http://bit.ly/VOqkhv
When resize the browser is possible to see that not work good, in fact, all divs are not centering with the menu. How can fid this? I tried also with margin: auto; but nothing .
Thank you so much in advance.
Set the 100% div to position:relative then the element you want to center to position:relative; margin: 0 auto;
That is because they are floating to the left. You can use inline-block instead.
Add text-align: center; to #post-area
Remove float: left; and add display: inline-block; vertical-align: top; text-align:left; to .type-post
Related
I have a footer made up of a few lists. I put each list in a div, and floating them so that the lists are horizontally next to each other. The text in each list is center aligned.
Now I'd like to center align all those divs! How can I do this? They are wrapped in a footer tag, but since the divs are floating, text-align:center; won't work.
Any ideas?
Thanks!
My CSS looks like this right now:
.footer{
height:180px;}
footer li{
list-style-type:none;
padding:0.2em 1em 0.2em 1em;
text-align:center;}
.section{
float:left;
margin-bottom:2.5em;
padding-top:0.8em;
margin-left:2em;}
To center an element, it'll typically need margin: 0 auto as stated in another answer.
If you want more elements within your container to center within the container, you should not be floating them. Floating them takes them out of the layout flow. You'll just want to make them display: inline-block.
* {
padding: 10px;
text-align: center;
}
footer {
background: #ddd;
}
.item {
display: inline-block;
background: #999;
width: 20%;
}
Example:
http://codepen.io/anon/pen/RKQJNa
.footer {
margin: 0 auto;
}
This should align the footer in the centre
I have been trying to align image inside a div vertically but it seems impossible to me
I have tried to give anchor a of img these styles
vertical-align: middle;
line-height: 190px;
Here is the link to my Fiddle
I have acheived these things that image height should never get more than the DIV and its width should never be less than the width of DIV
Can someone correct me how do I get this image in middle vertically?
Update:
Here it is on my live site
http://www.wholesalerhinestones.org/testtest.html
just add
vertical-align: middle;
to the image, here's the Updated Fiddle
Edit
for your live site, change the style of .link_image to
.link_image {
width: 212px;
height: 190px;
display: table-cell;
background-color: red;
vertical-align: middle;
}
and for .transfers_image, remove the display: inline-block;. It's not needed
I have a content div, which has a paragraph_content div inside with paragraphs in it.
The content div is 1000px wide. Now the paragraph_content automatically applies the 1000px width of the content. So I can never center it with margin: 0 auto, so the text in the paragraphs get centered. Now I could do text-align: center, but then the lines doesn't show under eachother since some lines are shorter and all is centered.
I want it centered, and all text lines placed right under eachother instead of some jumping in later.
And I want it centered so that if the text get adjusted it doesn't just expand it on the right side, but that the left and the right side auto expand so all stays centered.
what I have:
#content{
width: 1000px;
float: left;
overflow: hidden;
}
#paragraph_content{
display: block;
padding: 0;
margin:0 auto;
overflow: hidden;
}
#paragraph_content p{
float: left;
font-family: Lucida Console;
font-size: 12px;
padding: 5px;
}
http://jsfiddle.net/cUx2k/
I have put borders to show the space of the content and child div. the paragraphs are taking all of the space on the right for example as is the child div. So I cant never center it in the content div.
I fixed it by:
#paragraph_content{
display: table;
margin: 0 auto;
}
Try setting display:inline-block; to #paragraph_content, along with width:100%;.
It wasn't very clear to me what is the problem with text-align:center; in your case. You can maybe help adjusting the line-height of the element if you worry about the space between lines (if I understood you correctly).
The navigation bar at top contains width: 100% height: 50px and is fixed positioned to the top.
However, the UL tag inside is always keeps positioning itself to the left side. It should be centered.
I tried so many things, like making a secondary div and giving it margin: 0 auto, giving
UL margin: 0 auto, making left %30 and right %30, float: center etc.
Am I missing something? What's the reason I can't position it to the center?
On '#navlist' change text-align: left to be text-align: center
On '#navlist ul' add the property display: inline-block;
You will need a div that wraps the ul and set its margin to "0px auto" just like you tried with the ul.
<div style="width:600px; margin:0px auto;">
<ul>...</ul>
</div>
I have had good luck centering a UL with these styles:
<style>
#container {text-align:center;}
#container ul {display:inline;}
#container ul li {display:inline;list-style-type:none;}
</style>
Generally, I have to steer clear of display:inline-block as we still develop for older IE browsers that don't acknowledge 'inline-block'.
you need to set and width for the Navigation bar, so it can be centered.
#menu-main-nav {
width: 990px;
}
make that div with some fix width and float. left or right.
then inside it.. make UL and with property of margin:0 auto;
div {
width:200px;
height:auto;
float:left;
}
ul {
margin:0 auto;
}
Could someone show me how to create three column divs with the middle div 1040px width and the left and right divs are elastic so they contract when the window is resized. this will center the middle div at all times.
There is a way, I just find out! :D
HTML:
<div id='siteHeadLeft'></div>
<div id='site'>
<div id='siteHeadRight'></div>
CSS:
#siteHeadRight{
height:95px;
float: right;
margin-right: -500px;
background-image:url(../IMG/menu_bg.png);
background-repeat:repeat-x;
width: 50%;
}
#site{
float: left;
width:1000px;
}
#siteHeadRight{
height:95px;
float: right;
margin-right: -500px;
background-image:url(../IMG/menu_bg.png);
background-repeat:repeat-x;
width: 50%;
}
You can center a fixed width div simply by adding this CSS:
div {
width: 1040px;
margin: 0px auto;
}
If you want to add a background, you would add it to the div's parent element, or the body of the page.
If your goal is simply to center the middle div, simply give it the following CSS properties:
width: 1040px;
margin: auto;
position: relative (or static. NOT absolute or fixed);
You can set a tiling background-image for the body element that will cover the area on either side of your div.
EDIT: Here's an example that comes pretty close to what you're looking for: http://jsfiddle.net/kqVFy/