This should be really easy, but think dealing with brain fog.
Trying to create a page which shows text at center of the page[ vertically / horizontally]
<html>
<head>
<title>Application error</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<table>
<tr>
<th style="background-color:#FFFFFF;vertical-align: central">
This should be center of page vertcally/horizontally
</th>
</tr>
</table>
</body>
</html>
The text is aligned in center but right at top of the page - horizonatlly center but vertically.
[tried looking for tag called 'brain freeze' but could not. maybe the admins can make one for such a case]
Use this settings:
table{
position:relative;
margin:0 auto;
top:50%; /* assign manually */
}
body{
height:100%;
width:100%;
position:absolute;
}
jsFiddle:here
Change it to vertical-align: middle;
this JSFiddle shows how to align centerally
Make your CSS as
table {
width:300px;
height:300px;
background-color:#d9d9d9;
position:fixed;
margin-left:-150px; /* half of width */
margin-top:-150px; /* half of height */
top:50%;
left:50%;
}
table th
{
text-align: center;
vertical-align: middle;
}
You shouldn't use tables for designing layout. Use divs instead
<div style="width:100%;height:100%;text-align:center;margin-top:50%;">
<div style="height:20px;line-height:20px;font-size:12px;margin-top:-10px;">This should be center of page vertcally/horizontally</div>
</div>
Notice the margin-top:-10px. That is because the inner div is positioned at 50% of the outer-div. But if you really want it in the middle, you want it to positioned at 50% - "half the height of the inner div" and the height of the inner-div is 20px. The line-height makes sure that text inside the inner-div is aligned in the middle of the div.
Of course you should classes (or id's) instead:
css:
.outer {
width:100%;
height:100%;
text-align:center; //Make sure everything inside the this div is centered
margin-top:50%; //Position the inner-div at half of the height of this div
}
.inner {
height:20px; //Set a specific height
line-height:20px; //Set a line-height (works when only one row of text) to align text vertically in the middle
font-size:12px;
margin-top:-10px; //Position the div upwards (half the height of this div)
}
html:
<div class="outer">
<div style="inner">This should be center of page vertcally/horizontally</div>
</div>
Related
This question already has answers here:
How do I vertically align text in a div?
(34 answers)
Closed 9 years ago.
I was wondering what would be the best way to vertically center a div inside another div. The only constraint I have is that .anim needs to remain relative! I lsited the current code I have now down below. Thanks guys!
HTML:
<div class="anim">
<div class="spacer">
<p>CONTENT</p>
<p>more content</p>
</div>
</div>
CSS:
.anim {
position:relative;
width:75%;
margin:auto;
height:50%;
}
.spacer{
position:absolute;
height:300px;
top:0;
bottom:0;
}
.anim{display:table;}
.spacer {display:table-cell; vertical-align:middle;}
would have it vertically aligned
An easy way to do this is to give your .anim div a fixed height of, let's say, 500px.
Then you can just add a margin-top :
.anim {
margin-top: 100px; // (500 - 300) / 2 = 100
}
demo
according to w3: http://www.w3.org/Style/Examples/007/center.en.html#vertical
CSS level 2 doesn't have a property for centering things vertically. There will probably be one in CSS level 3. But even in CSS2 you can center blocks vertically, by combining a few properties. The trick is to specify that the outer block is to be formatted as a table cell, because the contents of a table cell can be centered vertically.
so the code is really simple
.anim {
display: table-cell;
vertical-align: middle;
height: 200px;
}
here is the demo http://jsfiddle.net/AbTxS/
From your question it looks like you want something like this... div.spacer is vertically centered and div.anim remains relative.
The div.spacer top margin must be negative half of the .spacer height.
This solution only works with a fixed height for .spacer.
CSS
.anim {
position:relative;
width:75%;
margin:auto;
height:800px;
background:#FF0
}
.spacer {
position:absolute;
top:50%;
margin:-150px 0 0;
width:300px;
height:300px;
background:red
}
HTML
<div class="anim spacer">
<p>
Content
</p>
<p>
More content
</p>
</div>
Images will not center with vertical align for me, as it seems they should. I am coding for IE7 in quirks mode only (unfortunately). My code is below. Anyone know why this wouldn't vertically align
<html>
<head>
</head>
<body>
<div style="height:500px; width 500px; line-height:500px; background-color:Green; vertical-align:middle;">
<img src="./images/load.gif" style="vertical-align:middle;"/>
</div>
</body>
</html>
If you want to vertically align your image within the div you should do the following:
div {
position:relative;
height:500px;
width:500px;
}
div img {
position:absolute;
top:50%;
margin-top:-XXXpx; /* where XXX is half the height of the image */
}
You can make the image a background image instead and then center the background with something like the following:
<div style="height:500px; width 500px; line-height:500px; background: green url('/images/load.gif') left center no-repeat ; "></div>
I have a <div> containing an image and some text. The image is supposed to come at the left corner and the text is supposed to come in the center of the <div>. But the text is coming off a little off-center to the right due to the width of the image.
How do i fix it??
<header>
<img id="searchBoxProp" src="/resources/images/searchBoxProp.png">
<div class="title">RECIPE SEARCH</div>
</header>
header #searchBoxProp { margin: -16px 0 0 2px; width: 43px; float: left; }
header .title { text-align: center; margin-left: 0 auto; }
You could set the image as background of the <div class="title"> and then set text-align:center in order to align the text properly.
The HTML could be just:
<header>
<div class="title">RECIPE SEARCH</div>
</header>
And the CSS:
div.title {
background-image:url('/resources/images/searchBoxProp.png');
background-repeat:no-repeat;
text-align:center;
}
You will also need to set a fixed height (equal to the image), and finally set the width you wish.
Set header to position:relative, and #searchBoxProp to position:absolute. Absolute positioning takes the element out of the layout, so it won't affect the text postion. The relative positioning on header makes sure that #searchBoxProp is positioned relatively to header, instead of the browser window.
header {
position:relative;
}
#searchBoxProp {
position:absolute;
left:0px; /* set to your needs */
top:0px; /* set to your needs */
}
Best practice is to use a background image however if not you can use position absolue like this.
header{position:relative;}
header .title { position:absolute; width:100%; display:block; text-align:center; }
I have a div:
clear:both;
position:absolute;
bottom:0;
left:0;
background:red;
width:100%;
height:200px;
And a html, body:
html, body {
height:100%;
width:100%;
}
/* Body styles */
body {
background:url(../images/background.png) top center no-repeat #101010;
color:#ffffff;
}
My code is basically 20 loren ipsum paragraphs followed by the div.
Now i tried setting position to relative and absolute and etc but with absolute the div aligns itself to the bottom of the screen so when you scroll down the div scrols with it
I tried setting it to relative but when theres not enough content to make the page scroll, the div is not at the bottom of the page.
I tried fixed but that just fixed it.. no use to me
How can i get the div to be at the bottom of the screen and page depending on if theres scroll or not
Ok, fixed and working :D Hope it does what you want it to.
Preview here: http://jsfiddle.net/URbCZ/2/
<html>
<body style="padding:0;">
<div style="position:fixed; width:100%; height:70px; background-color:yellow; padding:5px; bottom:0px; ">
test content :D
</div>
<!--Content Here-->
</div>
</body>
</html>
Shorter solution:
.footer {
bottom: 0%;
position: fixed;
}
I would like an element to fill the remaining space of a parent div. I have managed to do this, You can see it here "link removed" but the filling div (right) sits underneath the left div. I bascially want the right div to start where the left div finishes.
Hope this make sense.
<html>
<head>
<title></title>
<style type="text/css">
#left {
float:left;
width:180px;
background-color:#ff0000;
height:20px;
}
#right {
width: 100%;
background-color:#00FF00;
height:30px;
}
</style>
</head>
<body>
<div>
<div id="left">Nav</div>
<div id="right">This is the space I need to fill but not go underneath the nav div</div>
</div>
</body>
</html>
On #right, simply remove width: 100%, and add overflow: hidden.
See: http://jsfiddle.net/hJzJf/ - (I'm assuming your heights are just for testing purposes)
Why does this work?
See: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats
Set margin-left: 180px; on the #right element. This will offset it by the width of the first element.
http://jsfiddle.net/DHSej/