I'm trying to make text stay in the middle of a resizable DIV.
Here's the example:
CSS
#rightmenu {
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
}
HTML
<div id="rightmenu">This text should be center aligned and in the middle of the resizable rightmenu</div>
I've tried to make a Class to contain the text with the "margin-top and margin-bottom" both on auto, but doesn't work.
If you don't care about IE7 support, you can do it like that:
HTML:
<div id=wrap>
<div id=inside>
Content, content, content.
</div>
</div>
CSS:
#wrap {
/* Your styling. */
position: absolute;
z-index: 999999;
right: 0;
height: 60%;
text-align: center;
/* Solution part I. */
display: table;
}
/* Solution part II. */
#inside {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: middle;
}
The code: http://tinkerbin.com/ETMVplub
If you're OK with JavaScript you can try this jQuery plugin: http://centratissimo.musings.it/ but since it also doesn't seems to support IE7 the CSS solution is probably better.
Flexbox has really changed the game with aligning elements in a fluid manner. Define your container element to be display: flex and then to align your inner children you would use justify-content: center; align-items: center;
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.parent {
height: 500px;
width: 500px;
position: relative;
}
<div class="parent">
<div class="container">
<p>Hello</p>
<p>World</p>
</div>
</div>
You'll notice that "Hello" and "World" will both be vertically and horizontally centered within the .container element.
Replace height: 60%; with padding: 30% 0;.
If you want the text to be horizontally centered in a div, 'text-align:center;' is your friend. If you want it vertically centered; wrap the content inside an inner div, and then use 'margin: auto' for that inner div. Of course, you'll have to give the inner div a width; otherwise, the horizontal center won't work.
'valign="middle"' also works in tables if tables are an option (otherwise discouraged)
Check if this is needed:
<html>
<head>
<style type="text/css">
div {
height: 100px;
width: 100px;
background: #ccc;
text-align: center;
}
p {
line-height: 100px;
}
</style>
</head>
<body>
<div>
<p>centered</p>
</div>
</body>
</html>
Related
This is the code: https://jsfiddle.net/twy161er/6/
HTML:
<div id="top">
Logo. Menu
</div>
<div id="content">
Text Text Text
</div>
<div id="bottom">
Text in the bottom
</div>
CSS:
#top {
width: 100%;
height: 100px;
background-color: red;
}
#bottom {
width: 100%;
height: 100px;
background-color: blue;
margin: 0;
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
}
#content {
}
I want the "content" div to be in the center and in the middle of the page.
How should I do it?
Create a parent div .main for the three DIV and add a wrap DIV tag for content text and use display table table-row table-cell.
html, body {
height: 100%;
margin: 0;
}
.main {
display: table;
width: 100%;
height: 100%;
}
.top {
height: 0; /* make it dynamic */
background-color: red;
display: table-row;
}
.bottom {
height: 0; /* make it dynamic */
background-color: lime;
display: table-row;
}
.content {
display: table-row;
vertical-align: middle;
background: yellow;
}
.content div {
text-align: center;
vertical-align: middle;
display: table-cell;
}
<div class="main">
<div class="top">
Logo. Menu<br />
Dynamic content
</div>
<div class="content">
<div>Text Text Text</div>
</div>
<div class="bottom">
Text in the bottom<br />
Dynamic content
</div>
</div>
Jsfiddle demo : https://jsfiddle.net/twy161er/15/
Why use display:table? Because the content text always show even if the window height less than 200px; and you get IE8/9 support.
That is pretty simple!
You can make the contents of the #content like this:
<div id="content">
<div>Text Text Text</div>
</div>
Then, all you need to do is add this CSS:
#content {}
#content div {
position: absolute;
padding: 0;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Explanation
You firstly absolute your text. Then, you reset the margin and padding of the element <div>. What you do then is, push the inner <div> down by 50% of the page height and push left by 50% of the page width. Then, you have to move it towards the left, 50% of its width, and move it towards the top, 50% of it's height. That way, you can get the exact center of the <div>.
Working example: JSFiddle.
CSS rule "margin: auto" to the #content div should put it on the middle horizontally.
In order to put it in the middle of the screen, try:
#content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
taken from here How to position a div in the middle of the screen when the page is bigger than the screen
Notice that your top and bottom divs are in absolute position, so no way to tell the #content div to position itself relatively to them.
Your content is missing reference to id "#".
And i hope this is solution to your problem.
#content {
display: table;
margin: 0 auto;
}
I want to center a paragraph which is positioned absolute inside another div positioned relative. The problem is since this is absolute I can't use text-align: center! Also I want to center the paragraph both vertically and horizontally.. .
My HTML looks like this
<div class="top">
<p class="same">Django</p>
</div>
CSS
.top
{
width: 100%;
height: 70px;
position: relative;
}
.same
{
position: absolute;
}
I want the paragraph text 'Django' to be in the center both vertically and horizontally
(http://i.imgur.com/MNcaBYs.jpg)
You don't need absolute positioning at all to achieve what you want :
.top { width: 100%; height: 70px; text-align: center; }
.same { display: inline; line-height: 70px; }
You can force paragraphs to have inline layout and then center them horizontally using text-align: center. To center them vertically just add line-height to paragraph equal to container's height (it is not a problem here as you container's height is fixed). If you don't want to set display: inline explicitly, you can just use span instead of p.
JSFiddle
You can achieve that in following way.
.top
{
width: 100%;
height: 70px;
position: relative;
}
.same
{
position: absolute;
height: 50%; /* This is mandatory i.e. this should not be auto */
text-align: center;
width: 70%; /*This is not mandatory*/
/* The code below is required to horizontally and vertically center the <p> element */
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I initially had vertically centered text using the table/table-cell display method, which worked great. The problem came when I switched to a percentage height for the container and used a block level image (sibling to the text in question) to set the size of the container. I can no longer get the absolutely positioned text to equal the container height without declaring a static container size. Obviously this is simple to solve with JS, but I'd prefer not to go that route.
I'm also using picturefill.js to serve images, so using the image as a css background isn't an option (unless anyone has suggestions to make it work).
Here's the fiddle:
http://jsfiddle.net/rHZdQ/
And here's the code:
HTML
<div class="tile">
<a href="#">
<img src="#">
<div class="header-container">
<h2>title</h2>
</div>
</a>
</div>
CSS
.tile {
position: relative;
}
img {
display: block;
}
a {
display: block;
position: relative;
}
.header-container {
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
h2 {
display: table-cell;
text-align: center;
vertical-align: middle;
z-index: 199;
}
Centering Text in an Absolutely Positioned Image Overlay Using CSS
Consider the following HTML snippet:
<div class="tile">
<div class="image-container">
<img src="http://placekitten.com/400/400">
</div>
<div class="header-container">
<div class="panel">
<h2><span>percentage sized div</span></h2>
</div>
</div>
</div>
and apply the following CSS rules:
.tile {
border: 3px solid #555;
position: relative;
margin: 6px;
float: left;
}
.image-container img {
display: block;
height: 100%;
width: 100%;
}
.header-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.header-container .panel {
display: table;
width: 100%;
height: 100%;
}
.header-container .panel h2 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.header-container .panel h2 span {
display: inline-block;
padding: 5px;
border-radius: 5px;
background-color: rgba(255,255,255,0.5);
}
The parent/containing block is div.tile, and it has two child elements, .image-container which is in-flow, and .header-container which is absolutely positioned and hence out-of-flow.
Since .tile is floated, it shrinks-to-fit the content, which is the image in .image-container, with the dimensions determined by the native height and width of the image.
To create the overlay, .header-container is absolutely positioned to the top and left of its relatively positioned parent, with 100% width and height which forces it to extend to the containing block (see yellow outline).
Within .header-container, create an anonymous table by setting display: table to .panel, and specify 100% width and height so it extends and fills the .header-container.
Finally, define an anonymous table-cell on .panel's nested <h2> element, and apply text-align: center and vertical-align: middle to center the text post horizontally and vertically.
Note that the table-cell will extend the full width and height of the table so if you want to style the text with a border or background, you need to wrap it an inline-block element (the <span> in my example).
You can view the code at: jsFiddle Demo
Does your .header-container need to be width:100%? Can you use pixels instead?
If you use pixels and you do the following, then it will center it:
.header-container {
display: table;
height: 100%;
left: 50%;
position: absolute;
top: 0;
width: 400px;
margin-left:-200px;
}
Basically, margin-left has to be equal with half the width and a minus in fornt and then left:50%
UPDATE:
After informing me that it has to be only with percentage, the Jquery would be this:
$(document).ready(function() {
var minus = '-';
var headerwidth = $(".header-container").width();
$(".header-container").css('margin-left',minus+(headerwidth/2)+'px');
$(".header-container").css('left','50%');
});
I have an element which is an image within a div id. I am going to make this page a under construction page. I made the div with a "margin: auto" css command. What is away vertically that I can have the div auto center to any browser accessed by the site?
New to this don't know how to do the whole JSFiddle thing lol
Heres a url too: http://nerissagrigsby.com/?page_id=5
My CSS:
#openpagesig {
width: 803px;
height: 283px;
margin: auto;
}
My HTML:
<body>
<div id="openpagesig">
<img src="img/LoginSignature.png" width="803" height="283" alt="Login Signature"
/>
</div>
<!-- Open Page Signature -->
</body>
Have you tried the following CSS:
.inTheMiddle { /* or "#myImageId" (or just "img" if it's the only one) */
position: absolute; /* or "fixed" */
/* The element you want to place in the middle of the page
center should have explicitly defined dimensions: */
width: 100px;
height: 100px;
top: 50%;
margin-top: -50px; /* offset back at exactly half height of the element */
left: 50%;
margin-left: -50px; /* offset back at exactly half width of the element */
}
Here's a working example.
Do I need to mention, that this works even in Internet Explorer 5.5! ... but I doubt this browser is still relevant to anyone.
Please refer to the image below to see how the negative margins help:
Try something like:
.centeredDiv {
width:17em;
height:9em;
position:absolute;
left:50%;
top:50%;
margin:-135px 0 0 -155px;
padding:1em;
background-color:#fffff7;
opacity:0.67;
filter:alpha(opacity=67); /* for IE8 and earlier */
border:2px solid #191919;
}
Obviously editing measurements and colours to suit.
The problem you're having is related to vertically aligning div elements on a page. This is a common problem in HTML and CSS coding.
One solution is to have a container element within an outer div tag. The outer div should be set to display: table; and position: fixed; with 100% width and height as well. Set the inner div to display: table-cell; with the vertical-align: middle; property.
Furthermore, the outer div should have text-align: center; in order to center its child elements.
Here is the code you need:
.outer {
display: table;
height: 100%;
width: 100%;
text-align: center;
position: fixed;
}
.container {
display: table-cell;
vertical-align: middle;
}
An example from jsbin:
http://jsbin.com/otolot/1/
Try resizing the window to see that this works.
Personally I use something like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
<body>
<div class="container">
<div class="container-content">
<div class="content">
<img src="//placehold.it/803x283" />
</div>
</div>
</div>
</body>
</html>
<style>
html, body {
height: 100%;
}
.container {
display: table;
width: 100%;
height: 100%;
margin: auto;
}
.container-content {
display: table-cell;
width: 100%;
vertical-align: middle;
}
.container-content > .content {
max-width: 803px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
</style>
This solution works very nicely, because not only does it vertically center the content, but if the browser windows height is too small to display it all, you can still scroll to see all of the content which is one of the major drawbacks of using other methods.
Example:
http://jsbin.com/owayec/2/
I am working with a div that is 100% of the parent divs height.
The div only contains a single line of text.
The div cannot have a fixed height.
So my question is.
How do I vertically center the line of text?
I have tried using:
display: table-cell;
line-height:200%;
If it is important the div is absolutely positioned.
Current CSS
.requests {
position: absolute;
right: 0;
height: 100%;
width: 50px;
padding: 0 10px;
background-color: #69A4B5;
display: table-cell;
vertical-align: middle;
border-bottom-right-radius: 5px;
}
The best and easiest way to do it (currently in 2015 2020) is using flexbox:
.parent-selector {
display: flex;
align-items: center;
}
And that's it :D
Check-out this working example:
div {
border: 1px solid red;
height: 150px;
width: 350px;
justify-content: center;
/* Actual code */
display: flex;
align-items: center;
}
<div>
<p>Hola</p>
</div>
Old answer: You can use vertical-align: middle if you specify also display: table-cell;
.div {
display: table-cell;
vertical-align: middle;
}
Working example:
div {
border: 1px solid red;
height: 150px;
width: 350px;
text-align: center;
/* Actual code */
display: table-cell;
vertical-align: middle;
}
<div>
<p>Hola</p>
</div>
If it does not work you can try setting its parent as display: table;:
.parent-selector {
display: table;
}
Edit: You have this method plus all the methods covered on this question in this other question: How do I vertically center text with CSS?
This answer is no longer the best answer ... see the flexbox answer below instead!
To get it perfectly centered (as mentioned in david's answer) you need to add a negative top margin. If you know (or force) there to only be a single line of text, you can use:
margin-top: -0.5em;
for example:
http://jsfiddle.net/45MHk/623/
//CSS:
html, body, div {
height: 100%;
}
#parent
{
position:relative;
border: 1px solid black;
}
#child
{
position: absolute;
top: 50%;
/* adjust top up half the height of a single line */
margin-top: -0.5em;
/* force content to always be a single line */
overflow: hidden;
white-space: nowrap;
width: 100%;
text-overflow: ellipsis;
}
//HTML:
<div id="parent">
<div id="child">Text that is suppose to be centered</div>
</div>
The originally accepted answer will not vertically center on the middle of the text (it centers based on the top of the text). So, if you parent is not very tall, it will not look centered at all, for example:
http://jsfiddle.net/45MHk/
//CSS:
#parent
{
position:relative;
height: 3em;
border: 1px solid black;
}
#child
{
position: absolute;
top: 50%;
}
//HTML:
<div id="parent">
<div id="child">Text that is suppose to be centered</div>
</div>
Try this one http://jsfiddle.net/Husamuddin/ByNa3/
it works fine with me,
css
.table {
width:100%;
height:100%;
position:absolute;
display:table;
}
.cell {
display:table-cell;
vertical-align:middle;
width:100%;
height:100%:
}
and the html
<div class="table">
<div class="cell">Hello, I'm in the middle</div>
</div>
Since it is absolutely positioned you can use top: 50% to vertically align it in the center.
But then you run into the issue of the page being bigger than you want it to be. For that you can use the overflow: hidden for the parent div. This is what I used to create the same effect:
The CSS:
div.parent {
width: 100%;
height: 300px;
position: relative;
overflow: hidden;
}
div.parent div.absolute {
position: absolute;
top: 50%;
height: 300px;
}
The HTML:
<div class="parent">
<div class="absolute">This is vertically center aligned</div>
</div>
I disagree, here's a JS free solution, which works:
<html style="height: 100%;">
<body style="vertical-align: middle; margin: 0px; height: 100%;">
<div style="height: 100%; width: 100%; display: table; background-color: #ccc;">
<div style="display: table-cell; width: 100%; vertical-align: middle;">
<div style="height: 300px; width: 600px; background-color: wheat; margin-left: auto; margin-right: auto;">A</div>
</div>
</div>
</body>
</html>
Even though this question is pretty old, here's a solution that works with both single and multiple lines that need to be centered vertically (could easily be centered both vertically & horizontally as seen in the css in the Demo.
HTML
<div class="parent">
<div class="child">Text that needs to be vertically centered</div>
</div>
CSS
.parent {
position: relative;
height: 400px;
}
.child {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
If you know how tall your text is going to be you can use a combination of top:50% and margin-top:-x px where x is half the height of your text.
Working example:
http://jsfiddle.net/Qy4yy/
just wrap your content with a table like this:
<table width="100%" height="100%">
<tr align="center">
<th align="center">
text
</th>
</tr>
</table><
have you tried line-height:1em;? I recall that that's the way to get it to center vertically.
Did you try vertical-align: middle ???
You can find more info on vertical-align here: http://www.w3schools.com/css/pr_pos_vertical-align.asp
Vertical align, dynamic height combined with absolute position is except some special conditions not possible without a few lines of JS (eg. jQuery). (can possibly be solved with backend code in some cases, or min-height combined with sensible top or margin styles, but not perfect)
I mostly only use absolute position when something is supposed to "popup" in relation to something else which is in the float, I think that's the best way to use it so you don't have to fiddle with things like this.
No offense, but most answers in here are way off.
Setting the line height to the same as the height of the div will cause the text to center. Only works if there is one line. (such as a button).
Modern solution - works in all browsers and IE9+
caniuse - browser support.
.v-center {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Example: http://jsbin.com/rehovixufe/1/