I want to horizontally center a column in a responsive grid I'm trying to make. I have the grid set up, and it works just fine. But I want to make a .class that will take a column and center it horizontally in the parent (.row). I would use this class to take a one-column-row and center the column in said row. I can center the text using the text-align property, but I want the entire column to be centered that way if I add a border/background to the column it will be centered in the row, not just the column's content.
Here is the codepen.
Given that you are setting a width on the column, simply use margin:0 auto to center it. You would need to overwrite float:left with float:none though..
UPDATED EXAMPLE HERE
.center {
text-align: center;
margin:0 auto;
float:none;
}
Alternatively, if the element doesn't have a fixed width set on it, you could simply make it an inline-block element and add text-align:center to the parent. Perfect for dynamically varying widths.
Related
i'm trying to fix the position of a div while this div's alignment is centered, but when i enter position (whether fixed or absolute) alignment to center is disturbed. what's the cause?
#stage {text-align: center; position:fixed;}
You need to define a width for the fixed-position element. By default it is only as wide as its contents and aligned to the left top.
The way you describe it, probably width: 100% would be the adequate value, which stretches the element across the whole width, in which case the text-centering you applied will be effective.
Hello, I am trying to style the h1 in two different parts, share your dream and Holiday dream.
I am centering the text using the text-align center in the main tittle class, this center the text in just one line, when I add width 45% to the h1 I achieve having two lines but the text-aligns center stop working.
I don't want to use <br> and I have been told to use width percentages but the problem is it is not center anymore.
Thank you
The text-align still works, it will center the text inside the element.
You change the width of the element, therefor it appears to be off center. So, you'll need to center the element as well. Add margin: 0 auto to the element and it should be working again.
Your text are already aligned in center, it's your div i.e. .main-tittle not aligned center to aligned that center use margin:auto;
.main-tittle{
width:45%; /* try to use pixels px value over-here instead of percentage */
margin:auto;
}
I would like to position 5 column blocks,each containing text in a row.I have tried to create a wrapper class which has a width of 1600px,a padding of 30px to the left and the right and two classes that will align content to the left and the right respectively,each of these classes are in nested divs within the wrapper class.I gave each div a width of 300px and a height of 300px,the first four divs align next to each other while the last one goes below and to the right.The CSS and HTML is here.
EDIT:
The major issue got fixed when:
.wrapper
{
width:1600px;
height:auto;
padding:0px 30px 0px 30px;
}
But this seems to exceed the screen resolution needing me to scroll horizontally to view all the content,how do I deal with different screen resolutions?
try to give width:1600px;
.wrapper
{
width:1600px;
height:auto;
padding:0px 30px 0px 30px;
}
http://jsfiddle.net/sKsZN/
Try using float:left and display:inline-block for all the column <div>. Also make sure that the total width of those column don't exceed to .wrapper's width.
You should use float:left for your .content-right class. http://jsfiddle.net/sDyC5/2/
Wrapper element css width property has set to wrong value. You must set the properly unit (px|%|em|ex). And also display: inline-block and float propeties should not use together.
I'm creating a horizontal menu bar.
There is an outer div that contains inner divs (each of these divs is the individual menu item).
I use float: left for styling on these inner divs to display them horizontally instead of vertically.
The problem is that the menu bar has uneven space on the left and right, hence the overall menu bar doesn't appear to be centralized... i.e the first menu item on left has lesser space from left border and the space between last menu item on right and the right border is more.
I want equal margin/padding on the left and right to make the menu bar display in center.
I tried setting margin-left: auto; margin-right: auto on the outer div and then on the inner div as well. Both don't seem to help.
Already had a look here: How to horizontally center a <div> in another <div>?
However this particular answer is to center just one div, what I have is a collection of horizontal divs (menu items) that need to be centralized.
Any help is appreciated.
If your menu items aren't complex (like no fixed sizes or sub-elements), try adding the following styles:
#outer {
text-align: center;
}
.menu-item {
display: inline; /* replace 'float:left' with this */
}
DEMO
Otherwise you'll need a wrapper for the inner elements that has a fixed width:
#wrapper {
margin: 0 auto; /* center in outer DIV */
width: /* sum of widths of inner elements */;
}
DEMO
NOTE: Semantically its better to style menu items using a list, as in the DEMOs.
Firstly if all your menu items have specified widths and display:inline which is default, you wouldn't need a float to line them up.
But supposing you do, when you set a float, your elements are removed from the natural flow of the document, and hence margin:auto will not work to center it. What you could do in this case is create another container div of specified width for the menu items, within which you could use float to line them up.
Now what's left is to center this one container div within your outer div, which you have already seen how to solve. For example, you could use the margin:auto technique on the container div to center it. Make sure you have text-align:center for the outer div.
I want to create a page with a horizontal centered content block that reaches from teh top to the bottom of the browser window. I already figured out that tables are not the right way to design a layout. A block that reaches from top to bottom is not the problem:
<div style="position:absolute;top:0px;width:800px;height:100%;background-color: #fff;">
</div>
But I'm not able to make this Div centered. I tried
"margin:auto"
But no effect. Th centers the text in the Div, but not the Div itself on th screen.
To center a div you need two things, a width, and automatic horizontal margins. Like this:
#myDiv {
width:800px; /* or whatever */
margin:0 auto;
}
There is no need for absolute positioning, just these two rules will do the trick.
to center an Absolutely Positioned div add left: 50%; margin-left: -400px;
where the negative margin value is half the width of the div
Try not to use position:absolute for layouts unless necessary. This sample shows best practice for horizontally centering your content.
If you need a solution that will continuously work to restrain the content area height within the viewable area, try my jQuery solution: http://jsfiddle.net/BumbleB2na/Z75hA/