i have a problem with aligning.
This is my code.
Html:
<div id="alt">
<p>this is a sample text</p>
</div>
Css:
#alt{
display:block; position: absolute; top: 400px; left:500px; }
on using code everything looks fine. But when I reduce the zoom level of the browser. Its goes to the left. I want it to remain in the centre. Help me in solving this.
For aligning website content to center,you have to put all content in one div say main div and apply a below css to it
.main
{
margin-left:auto;
margin-right:auto;
width:960px;
}
use left:50% instead of left:500px;
css:
#alt{
display:block; position: absolute; top: 400px; left:50%; }
If your container div has a fixed width then use margin: 0 auto;
Fiddle: http://jsfiddle.net/X6Vxq/show
Try the following style.
#alt
{
display:block;
text-align: center;
top: 400px;
left:500px;
}
#alt p
{
margin: 0 auto;
display: inline-block;
}
If your content is present in a div, then you can give the position relative to the div and margin left and right to auto. Check the following code:
#alt {
position: relative;
margin-left: auto;
margin-right: auto;
}
This is a hard one to answer, since you don't seem to have given us enough info. Would you like the paragraph center justified or left-justified in a centered column?
To center justify, you can simply use:
#alt { text-align: center }
To create a centered block with the text left justified, use:
#alt {
width: 800px; /* Your desired width of the center block */
margin: 0 auto;
}
Hope this helps
Related
Creating a gallery of divs with links images and text. problem is- can't get the inner wrapper to center everything. margin:0 auto; isnt working because i havent set a width for it. but i want the width to change with different browser sizes but that the inner .prjctwrap divs will be centered within it. here's my markup:
HTML :
<div id="wrapper">
<div id="innerprjctwrap">
<div class="prjctwrap">
<a href="http://www.google.com">
<div class="imageCont" style="background-image:url(image1.jpg);">
</div>
<div class="text">Text Text Text</div> </a> </div>
...this reapeats from prjctwrap with other images, text and links
</div></div>
CSS:
#wrapper {
background-color: #FFFFFF;
width:100%;
height:1000px; }
.prjctwrap {
display:inline-block;
width: 130px;
height:180px;
overflow:hidden;
margin:15px; }
.prjctwrap .imageCont{
width: 130px;
height: 100px;
background-size: cover; }
.prjctwrap .text {
text-align: center;
color: black;
text-decoration: none;
height:80px; }
.prjctwrap a {
text-decoration:none; }
#innerprjctwrap {
margin:0px auto; }
You haven't set any size on the #innerprjctwrap element, so it will have the default setting width: auto;. That means that it will use the full width available, so you can't see that it's actually centered.
Set a width on the element, and you will see that it is centered:
#innerprjctwrap {
width: 130px;
margin: 0 auto;
}
If you want to use text alignment to center the content inside the element, you shouldn't use margins to center the element, you should use text-align to center what's inside it:
#innerprjctwrap {
text-align: center;
}
Add a width for #innerprjctwrap other ways margin:0 auto; not detected
Eg:
#innerprjctwrap {
margin:0px auto;
width:200px;
}
Using JsFiddle for explaining such problems will be much clear.
Is this fiddle what you want?
If so, then you want is actually to center elements inside #innerprjctwrap like #Guffa says, simply add:
#innerprjctwrap{
text-align:center;
}
add width. if no progress, try removing 'px'. if there's still no progress, use padding in the wrapper div.
I want my <p> element to be at the center of a container <div>, as in perfectly centered -- the top, bottom, left and right margins split the spaces equally.
How can I achieve that?
div {
width: 300px;
height: 100px;
}
p {
position: absolute;
top: auto;
}
<div>
<p>I want this paragraph to be at the center, but it's not.</p>
</div>
You dont need absolute positioning
Use
p {
text-align: center;
line-height: 100px;
}
And adjust at will...
If text exceeds width and goes more than one line
In that case the adjust you can do is to include the display property in your rules as follows;
(I added a background for a better view of the example)
div
{
width:300px;
height:100px;
display: table;
background:#ccddcc;
}
p {
text-align:center;
vertical-align: middle;
display: table-cell;
}
Play with it in this JBin
To get left/right centering, then applying text-align: center to the div and margin: auto to the p.
For vertical positioning you should make sure you understand the different ways of doing so, this is a commonly asked problem: Vertical alignment of elements in a div
♣you should do these steps :
the mother Element should be positioned(for EXP you can give it position:relative;)
the child Element should have positioned "Absolute" and values should set like this: top:0;buttom:0;right:0;left:0; (to be middle vertically)
for the child Element you should set "margin : auto" (to be middle vertically)
the child and mother Element should have "height"and"width" value
for mother Element => text-align:center (to be middle horizontally)
♣♣simply here is the summery of those 5 steps:
.mother_Element {
position : relative;
height : 20%;
width : 5%;
text-align : center
}
.child_Element {
height : 1.2 em;
width : 5%;
margin : auto;
position : absolute;
top:0;
bottom:0;
left:0;
right:0;
}
this is how I do it:
.container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 100px;
background-color: lightgreen;
}
.paragraph {
width: 250px;
background-color: lightyellow;
}
<div class="container">
<p class="paragraph">I want this paragraph to be at the center, but it's not.</p>
</div>
you can add text-align: center; to the paragraph if you want text alignment to be center
You only need to add text-align: center to your <div>
In your case also remove both styles that you added to your <p>.
Check out the demo here: http://jsfiddle.net/76uGE/3/
Good Luck
Centered and middled content ?
Do it this way :
<table style="width:100%">
<tr>
<td valign="middle" align="center">Table once ruled centering</td>
</tr>
</table>
I fiddled it here
Ha, let me guess .. you want DIVs ..
just make your first outter DIV behave like a table-cell then style it with vertical align:middle;
<div>
<p>I want this paragraph to be at the center, but I can't.</p>
</div>
div {
width:500px;
height:100px;
background-color:aqua;
text-align:center;
/* there it is */
display:table-cell;
vertical-align:middle;
}
jsfiddle.net/9Mk64/
on the p element, add 3 styling rules.
.myCenteredPElement{
margin-left: auto;
margin-right: auto;
text-align: center;
}
This solution works fine for all major browsers, except IE. So keep that in mind.
In this example, basicaly I use positioning, horizontal and vertical transform for the UI element to center it.
.container {
/* set the the position to relative */
position: relative;
width: 30rem;
height: 20rem;
background-color: #2196F3;
}
.paragh {
/* set the the position to absolute */
position: absolute;
/* set the the position of the helper container into the middle of its space */
top: 50%;
left: 50%;
font-size: 30px;
/* make sure padding and margin do not disturb the calculation of the center point */
padding: 0;
margin: 0;
/* using centers for the transform */
transform-origin: center center;
/* calling calc() function for the calculation to move left and up the element from the center point */
transform: translateX(calc((100% / 2) * (-1))) translateY(calc((100% / 2) * (-1)));
}
<div class="container">
<p class="paragh">Text</p>
</div>
I hope this help.
I am working on a simpl web page where I use a menu bar in a div tag . When I am not fixing the div tag it can be aligned in center using:
.top .overlay{
background-image:none;
text-align:center;
}
But when I use the position: fixed; then the alignment of menu doesn't work
.top .overlay{
background-image:none;
position:fixed;
text-align:center;
}
It's working if I use a fixed margin, but the problem is that the behavior would change depending on the screen resolution.
please help
Add this to your CSS:
.top .overlay {
width: 100%;
text-align: center;
}
And don't forget to remove the margin-left: 18%; part.
Try putting margin:0 auto; in .top .overlay {}
.top .overlay{
background-image:none;
position:fixed;
text-align:center;
margin:0 auto;
}
Solution for you: set width to 100%
.top .overlay{
...
position:fixed;
width: 100%;
...
}
I tried this CSS on your site with firebug and it worked:
.top .overlay {
background-image: none;
margin: 0 auto;
width: 830px;
}
The auto value for the margin CSS property will work only if a width is set.
I also removed the position property.
#container {
position :fixed;
margin: auto;
top:0%;
width: *AS_REQUIRED* px;
}
#container p {
text-align: center;
}
As shown above i have created two divisions:
For Positioning menu and its design
For text inside the menu
NOTE: text will be aligned center when you write text inside the <p> </p> tag
What would be the correct method to vertically center any content in a defined width/height div.
In the example there are two contents with different heights, what is the best way to center vertically both using the class .content . (and it works for every browser and without the solution of table-cell)
Have some solutions on mind, but would like to know other ideas, one is using position:absolute; top:0; bottom: 0; and margin auto.
I have researched this a little and from what I have found you have four options:
Version 1: Parent div with display as table-cell
If you do not mind using the display:table-cell on your parent div, you can use of the following options:
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 2: Parent div with display block and content display table-cell
.area{
height: 100px;
width: 100px;
background: red;
margin:10px;
text-align: center;
display:block;
}
.content {
height: 100px;
width: 100px;
display:table-cell;
vertical-align:middle;
}
Live DEMO
Version 3: Parent div floating and content div as display table-cell
.area{
background: red;
margin:10px;
text-align: center;
display:block;
float: left;
}
.content {
display:table-cell;
vertical-align:middle;
height: 100px;
width: 100px;
}
Live DEMO
Version 4: Parent div position relative with content position absolute
The only problem that I have had with this version is that it seems you will have to create the css for every specific implementation. The reason for this is the content div needs to have the set height that your text will fill and the margin-top will be figured off of that. This issue can be seen in the demo. You can get it to work for every scenario manually by changing the height % of your content div and multiplying it by -.5 to get your margin-top value.
.area{
position:relative;
display:block;
height:100px;
width:100px;
border:1px solid black;
background:red;
margin:10px;
}
.content {
position:absolute;
top:50%;
height:50%;
width:100px;
margin-top:-25%;
text-align:center;
}
Live DEMO
This could also be done using display: flex with only a few lines of code. Here is an example:
.container {
width: 100px;
height: 100px;
display: flex;
align-items: center;
}
Live Demo
I found this solution in this article
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
It work like a charm if the height of element is not fixed.
Simple trick to vertically center the content of the div is to set the line height to the same as height:
<div>this is some line of text!</div>
div {
width: 400px
height: 50px;
line-height: 50px;
}
but this is works only for one line of text!
Best approach is with div as container and a span with the value in it:
.cont {
width: 100px;
height: 30px;
display: table;
}
.val {
display: table-cell;
vertical-align: middle;
}
<div class="cont">
<span class="val">CZECH REPUBLIC, 24532 PRAGUE, Sesame Street 123</span>
</div>
I would say to add a paragraph with a period in it
and style it like so:
<p class="center">.</p>
<style>
.center {font-size: 0px; margin-bottom: anyPercentage%;}
</style>
You may need to toy around with the percentages to get it right
margin: all_four_margin
by providing 50% to all_four_margin will place the element at the center
style="margin: 50%"
you can apply it for following too
margin: top right bottom left
margin: top right&left bottom
margin: top&bottom right&left
by giving appropriate % we get the element wherever we want.
I'm stuck with this its the problem
<div id="example1">
<div id="example2"> </div>
<div id="example3"> </div>
</div>
I need to align the div with id example3 under example 2 and if it's possible just in the footer and center of the div with id example1. how can i do it?? i have days trying and more close it's like this.
CSS
#example3{
margin-left:auto;
margin-right:auto;
margin:0;
height:80px;
position:absolute;
top:170px;
}
#example2{
height:153px;
width:305px;
float:left;
background:url(Logo.png);
}
thanks for your help
For one thing, position:absolute won't let you set margins.
For another, you've got
margin:0;
which is resetting your auto on the left+right. Try
margin:0 auto;
Here's a JSFiddle which accomplishes what you're trying to do (more or less).
EDIT
OK, but now you've now introduced a third problem, in the float:left, which will override the auto margin and always float left.
Also, the problems I mentioned above haven't been addressed. To summarize: no floats, no absolute positions, and try not to override the margin by styling it twice.
Are you trying to have a 17px space between #example2 and #example3? Here's an updated link, evolved from the last one, that does this new behavior: JSFiddle
Going by the CSS you have I think you need to swap the div that's absolutely positioned to the "logo" (#example2), then you can just margin the top of example 3 to get the top 170px spacing
Example : jsfiddle
try:
#example1{
background: #eee;
height: 250px;
position: relative;
overflow: auto;
}
#example2 {
background: #444;
color: #fff;
position: absolute;
top: 0;
left: 0;
height:152px;
width:305px;
}
#example3 {
background: #007;
color: #fff;
width: 300px; /* adjust to suit */
height: 80px;
margin: 170px auto 0 auto;
}
if you don't know the width of #example3 - and so can't use the auto left and right margins - then you can center it another way by changing it to display: inline-block and setting text-align: center on #example1