This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I would like to center both horizontally and vertically a <p></p> that could consist of one or more lines, in a <div></div>. Only the parent's width and height are known. Note: I refer to the div as parent, and the p as child.
I've seen here and on other sites, that in order to do vertical centering, the best way would be by using display: table on the parent element and display: table-cell combined with vertical-align: middle on the child.
However, I need the div's style.top and style.left to be overwritten later by some javascript, to make it move. By using the table trick, it somehow prevents me from moving the parent, at least this way. Note that the child must stay centered when the div moves.
TL;DR:
How to center text in a div, and then still be able to move the div?
My html's body:
<div id="target">
<p>Centered?</p>
</div>
My CSS
div {
outline: 1px solid white;
background-color: #FF9F00;
position: absolute;
top: 0px;
left: 0px;
width: 200px;
height: 200px;
/* how to center its child? */
}
p {
font-family: Arial;
}
My javascript way of moving:
var target = document.getElementById("target");
target.addEventListener('mousemove', function (event) {
target.style.left = event.x + "px";
target.style.top = event.y + "px";
});
How about use flexbox?
div {
display:flex;
flex-direction:column;
justify-content: center;
text-align:center;
}
<div><p>I want this paragraph to be at the center, but it's not.</p></div>
It works if parent <div> is display: table-cell:
div {
width: 300px;
height: 150px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
}
p {
border: 1px solid green;;
display: inline-block;
}
<div>
<p>lorem ipsum bla bla blah</p>
</div>
Related
This question already has answers here:
Add centered text to the middle of a horizontal rule [duplicate]
(33 answers)
CSS technique for a horizontal line with words in the middle
(34 answers)
Closed 2 years ago.
I was wondering how can I implement this image with CSS(3) (and if necessary with javascript).
Any ideas?
There are numerous ways of doing this- but since your lines are more than 1 pixel in height and has rounded ends on both ends of both lines - I would di it as ::before and ::after pseudo-elements with the centered text.
Note that when positioning elements with position:absolute - you will need to apply position: relative to a parent element. Aslo - you will need to offset the line pseudoelements by half their height - in order to vertically center them.
.wrapper {
text-align: center;
position: relative;
}
span {
display: inline-block;
width: 10%;
font-size: 20px;
font-weight: bold
}
.wrapper::before,
.wrapper::after {
content: ' ';
display: block;
position: absolute;
top: calc(50% - 3px);
width: 45%;
background: black;
border-radius: 6px;
height: 6px;
}
.wrapper::after {
right: 0;
}
<div class="wrapper">
<span>Hi!</span>
</div>
This question already has answers here:
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 6 years ago.
I was create a div and another div inside of the div. I want these dot lines ... should be middle of the parent div (Horizontally and Vertically). Please help me. Thank you.
<div class = "test" style = "width: 32px; height: 22px; display: inline-block; border: 1px solid; border-radius: 5px; text-align: center;">
<div style = "display: inline-block;">...</div>
</div>
One possibility (and there are many) could be to use CSS Flexible Box Layout.
You can use the justify-content property to define aligment along the main axis and the align-items property to define how flex items are laid out along the cross axis.
You .test container would looks like this:
.test {
display: flex;
justify-content: center;
align-items: center;
}
You can check an example on this JSFiddle.
you have to use table-cell on your parent element and inline-block on the child and add vertical-align: middle to parent element:
<div class = "test" style = "width: 32px; height: 22px; display: table-cell; border: 1px solid; border-radius: 5px; text-align: center; vertical-align: middle;">
<div style = "display: inline-block;">...</div>
</div>
https://jsfiddle.net/Lkfr6ar1/
I have a div element (shown with red border in the image below), which I want to be able to fit in its parent div when the window is resized and not fall into the next line (the parent is the one with the green border).
I want the red div to have a starting width: 949px (in my current screen) in order to fit the entire space available as shown in the image, but be resizable, so that it doesn't fall into the next line if width: 949px is to much to fit.
In essence, I want it at all costs to cover the area it covers in the image even if in a narrower screen that means it will be like 10px wide.
How can I achieve this? Any solution using CSS, JavaScript or jQuery will be gladly accepted.
The image:
CSS:
#parent {
text-align: center;
width: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
}
#child1-row2 {
text-align: left;
vertical-align: middle;
width: 288px;
display: inline-block;
}
#child2-row2 {
text-align: left;
vertical-align: middle;
width: 288px;
position: relative;
margin: 0 25px 0 25px;
display: inline-block;
}
#child3-row2 {/* The one with the red border */
vertical-align: middle;
height: 452px;
width: 949px;
overflow: hidden;
position: relative;
display: inline-block;
}
You can use flexbox to do this by using the flex-grow property.
HTML :
<div id="main">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</div>
CSS :
#main {
display: flex;
flex-flow: row;
width:100%;
min-height:50px;
}
#box1{
background-color:red;
width:100px;
}
#box2{
background-color:blue;
width:100px;
}
#box3{
background-color:green;
flex-grow: 1;
}
Here is a working JSFiddle
You can use css calc function for this. Support for calc seems to be quite good now.
As you have mentioned, the left side divs are of fixed width, say 120px each. Also suppose the margin between them is 30px. So, the total width left for your red div is 100% - (2*120 + 2*30)px i.e. (100% - 300px ).
#red-div
{
width: calc(100% - 300px);
}
Add % width or you can do following :
$(window).resize(function() {
var window_width = $(window).width();
var w1_width = $('.div1').width(); // The first element width
var w2_width = $('.div2').width(); // The second element width
var main_div_width = window_width - (w1_width+w2_width+gutter[i.e margin between all 3 elements]);
$('.main_div_width').css('width', main_div_width);
});
For example, I have a div :
<div>I am a square</div>
Inside style.css :
div:nth-child(1) {
height: 200px;
width: 200px;
border-radius:0;
background-color: pink;
color: #fff;
text-align: center;
}
The text-align: center property aligns the text in the center of a div, but the text remains on the top inside the square, I want to push the text to the bottom of a square. So it looks like in this diagram. How can I accomplish this without wrapping the text in any sort of tag?
__________________
| |
| |
| |
| |
| |
|_I am a square__|
If you really don't want to wrap your text
You can do this by setting the display of the block to be table-cell, and then vertical-align to bottom. This is the only way I can think of to align the text to the bottom of the div without wrapping it in another element. This will cause a slew of other problems with your div placement, though; and you will probably have to wrap the div anyway.
div {
height: 200px;
width: 200px;
border-radius:0;
background-color: pink;
color: #fff;
text-align: center;
/* Here is my addition */
display: table-cell;
vertical-align: bottom;
}
JsFiddle example.
If you wrapping your text is an option (AKA the right way)
You really should wrap your text. Aside from semantics, you can get a lot more flexibility in your styling options.
Once you do that, your div can be set to position: relative so that it can act as a container for the child, who will get the position: absolute style. Then you add bottom: 0 and voila! It's glued to the bottom.
This method is preferred as you can still style your div as you'd expect.
HTML:
<div>
<p>test</p>
</div>
<div>
<p>test</p>
</div>
CSS:
div {
height: 200px;
width: 200px;
border-radius:0;
background-color: pink;
color: #fff;
text-align: center;
margin : 0 3px 3px 0;
/* Make sure that it contains the child properly */
position: relative;
}
div p {
position : absolute;
bottom : 0;
}
Example
Is there a CSS way to vertically align my div within the body element?
The thing is my div will have a different height each time, so its not constant.
These are the things I've tried but they dont work:
body { vertical-align: middle; }
#mainContent {
vertical-align: middle;
}
// Also this
body { margin-top: 20%; margin-bottom: 20%; }
I did it without table: (demo on dabblet.com)
The main trick in this demo is that in the normal flow of elements going from top to bottom, so the margin-top: auto is set to zero. However, for an absolutely positioned element acts the same distribution of free space, and similarly can be centered vertically at the specified top and bottom (does not work in IE7).
This trick will work with any sizes of div.
HTML:
<div></div>
CSS:
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
A common problem indeed. I have seen many people offering straight css solutions for this but they all require knowing the height of the element needing to be centered, so no help there.
I usually do it this way using jquery:
$(document).ready(function(){
site.resize();
$(window).resize(function(){
site.resize();
});
});
var site = {
resize: function(){
var new_margin = Math.ceil(($(window).height() - $('#mainContent').height()) / 2);
$('#mainContent').css('margin-top', new_margin + 'px');
}
};
Surprisingly (or not), the vertical-align tool actually works best for this job. Best of all, no Javascript is required.
In the following example, I am positioning the outer class in the middle of the body, and the inner class in the middle of the outer class.
Preview: http://jsfiddle.net/tLkSV/513/
HTML:
<div id="container">
<span></span><div class="outer">
<span></span><div class="inner">
</div>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0; }
#container {
text-align: center;
height: 100%; }
span {
height: 100%;
vertical-align: middle;
display: inline-block; }
.outer {
width: 100px;
height: 200px;
padding: 0;
border: 1px solid #000;
vertical-align: middle;
display: inline-block; }
.inner {
background: red;
width: 30px;
height: 20px;
vertical-align: middle;
display: inline-block; }
Vertical align works by aligning the centers of elements that are next to each other. Applying vertical-align to a single element does absolutely nothing. If you add a second element that has no width but is the height of the container, your single element will move to vertically center with this no-width element, thus vertically centering it. The only requirements are that you set both elements to inline (or inline-block), and set their vertical-align attribute to vertical-align: middle.
Note: You may notice in my code below that my <span> tag and <div> tag are touching. Because they are both inline elements, a space will actually add a space between the no-width element and your div, so be sure to leave it out.
You can do it without using tables, and without adding extra elements:
<ul>
<li>One short item</li>
<li>Any real long text...</li>
<li>Another short item</li>
</ul>
And then the CSS:
ul {
list-style-type: none;
display: table-row;
}
li {
display: table-cell;
vertical-align: middle;
}
You can see it here
It would work with any other kind of hierarchy, including div, p, etc.
Honestly, my opinion is often that if you're doing vertical alignment you should still be using a table. I know it's often frowned upon, but it is still the simplest and cleanest way to vertically center something.
HTML
<table>
<tbody>
<tr>
<td>
<div>Your DIV here.</div>
</td>
</tr>
</tbody>
</table>
CSS
td {vertical-align: middle;}