I have horizontally centered some overflowed text (actually I found this on stack overflow). I'm trying to vertically center it to no avail.
The HTML:
<div id="outer"><div id="inner"><div id="text">some text that will overflow</div></div></div>
Here's the CSS:
#outer {
display: block;
position: relative;
left: 100px;
width: 100px;
border: 1px solid black;
background-color: silver;
height: 150px;
}
#inner {
/* shrink-to-fit width */
display: inline-block;
position: relative;
/* shift left edge of text to center */
left: 50%;
}
#text {
/* shift left edge of text half distance to left */
margin-left: -50%;
/* text should all be on one line */
white-space: nowrap;
}
I have an adapted fiddle here:
http://jsfiddle.net/HfT72/
Does anyone have any thoughts?
Working JSFiddle, though I don't know if this solution is useful to you.
I set the #inner wrapper to top: 50%; as well as setting position:relative for the #text, then displacing it by top:-8px(half of the font height of 16px).
There might be a better solution, but vertical centering has rarely a clean solution.
Edit: Updated JSFiddle showing the difference between my solution and the above one. Resize the preview window to see what I mean.
Related
I've got a little css problem.
I got a div with a max-width. In this div there is a img that needs to be positioned outside his div (to the bottom). Unfortunately I can't use position absolute because of the max-width. When I would use position absolute, at some point the width of the screen reaches the max-width and the img with position absolute will go outside the div on the right side.
I know this must sound a little messy, so I've made a Jsfiddle:
https://jsfiddle.net/te93s8h1/
This JS Fiddle shows a example of the issue I got. I need the green block outside the div (at the bottom) but the green block can not go outside the div on the right side. How can I achieve this?
I prefer css only.
Never mind my question, I think I understand what you're trying to achieve. You should add a position: relative; statement to the style block of your .grid class as demonstrated in this JSFiddle.
Just simply try this without using position absolute.
.container {
background-color: #00f;
width: 98%;
height: 100px;
margin: auto;
max-width: 1300px;
}
.grid {
position: relative; /* Added Position */
background-color: #f00;
width: 50%;
margin: auto;
min-width: 600px;
height: 100px;
}
.block_outside_div {
position: inherit; /* Added Position */
background-color: #0f0;
height: 50px;
width: 50px;
left: 45%; /* 45% Percentage value for move from left */
top: 120px; /* 120px value for move from top */
}
<div class="container">
<div class="grid">
<div class="block_outside_div">
</div>
</div>
</div>
I have three div as shown below. I want to keep inner div in exactly center of outer div. I found some solution with position style set, but it was creating problem with my other element in my project, so I don't want to use position in style. I want to center inner div without using position style.
<div id="container">
<div id="outer">
<div id="inner"></div>
</div>
</div>
You can use CSS flexbox.
#outer {
display: flex; /* establish flex container */
justify-content: center; /* center #inner horizontally */
align-items: center; /* center #inner vertically */
}
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
DEMO
found another solution
#outer {
display: table-cell;
vertical-align: middle;
}
#inner {
margin:auto;
}
http://jsfiddle.net/dspLofov/1/
Here is how I would center a div inside a div, the css is as follows
#outer {
background: green;
height: 200px;
width: 200px;
position: relative;
}
#inner {
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
width: 50%;
height: 50%;
overflow: auto;
background: red;
transform: translate(-50%, -50%);
resize: both;
padding: 1em;
}
//I put color in the background so it is easy to see.
here is the fiddle: https://jsfiddle.net/dwillhite/464Lf6wr/embedded/result/
Hope this helps!
How to automatically adjust size of the div which is horizontally centred, using another div which has position: fixed property?
To better understand what I mean please take a look at the picture below. Div A is a fixed div with a fixed size and div B is a div which is horizontally centred. I want div B to resize (when I resize browser window) in a such way so right border of A and left border of B never overlap (ideally, if the distance between the borders kept the same).
I know that this can be fairly easy done using JavaScript by reacting on resize events, but I'm wondering is there any way to achieve this in pure CSS?
Here's another way. This should work in older browsers too.
<style>
div {
border: 1px solid red;
height: 100px; }
#A {
position: fixed;
width: 150px; }
#B {
margin: 0px 155px; }
</style>
<div id="A">Stuff</div>
<div id="B">Stuff</div>
How about this:
#a{
width:200px;
}
#b{
width:calc(100% - 400px);
}
Just set the width of B to be 100% of screen width minus twice the width of A and their borders will touch.
When an element is given the settings position: absolute or position: fixed You can change the width of an element by using the left and right properties.
Simply add the same amount to the right as you would to the left
#left {
position: absolute;
width: 150px;
}
#middle {
position: absolute;
left: 165px;
right: 165px;
overflow: auto;
}
/* For demo purposes */
html, body, div { height: 100%; margin: 0; } div { background: red; } #overflow { height: 200%; }
<div id="left"></div>
<div id="middle">
<div id="overflow"></div>
</div>
I have a page that should have text on the left and a form on the right. It looks (and renders) properly on most browsers (including Firefox, Chrome, and Safari).
Some versions of IE, however, keep the form in the correct position (top-right), but push the text all the way to the bottom of the page.
Here's the code used to position the form:
.custom #conversion_form {
width: 300px;
border: 1px solid #999;
background-color: #e9e9e9;
padding: 25px 30px 25px 25px;
float: right;
display: block;
margin-left: 20px;
}
What tag(s) to I need to add to keep the text in the top left/avoid having it get pushed down?
Demo: http://rainleader.com/signup
Screenshot (How it Should Look):
I'd create two divs, one for the text other for the form.
I always use the center 50% on the left attribute and use margin-left or marging-right to handle de position of the divs independently of resolutions.
See this example:
Div for the text, put the text within the div:
.div_left_text {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
margin-left:-250px;
top: 15px;
}
Div for the form, put the form within this div:
.div_right_form {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
margin-right:250px;
top: 15px;
}
This should create two areas one in the left another in the right independently.
When you are creating a side by side effect it's always best to float the left content left, float the right content right, and overflow:hidden; both.
If you still see a problem, wrap both of the content in a <div> and overflow:hidden; that.
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/