I am trying center text vertically and I use trick with translate.
HTML
<div class="first">
<div class="second">
<span>TESTING</span>
</div>
</div>
CSS
div.first > div.second {
border: 1px solid red;
height: 2em;
}
div.first > div.second > span{
position: relative;
top: 50%;
transform: translateY(-50%);
}
Why the text isn't vertical center?Fiddler
I notice when I change height css property to line-height text started center.
Can someone explain me why this working like that?
A span is not a block element. Note that if you add display:block to your CSS, it will vertically align.
div.first > div.second > span{
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
}
Or you could change your span to a div.
The correct way to have an element vertically center is to,
Set the effective div's position to absolute width a top value of 50% and set the parent's position to relative.
Example:
div.first > div.second {
position: relative;
}
div.first > div.second > span {
position: absolute;
top: 50%;
}
DEMO
height vs line-height
height is the vertical measurement of a container.
line-height is the distance from top of the first line to the top of the second line.
Since you have only one line of text here you are seeing it middle of the container. Try adding another line of text and you will understand clearly.
Related
I have an image (picture of a lawn) styled with the following:
img{
width: 100%;
height: 40%;
position: fixed; <!-- top of page-->
}
I have an <h1> Putnam Lawn Care</h1> that I would like to have overlap and be centered in the image, but am unsure how to do this with css (I have tried position:fixed; top: 20%; left: 50%; but this puts the 'P' of 'Putnam Lawn Care' at 50% so this is also not centered) ? Also I am unsure if fixed positioning is correct here, should I be using absolute? Thanks in advance for any help!
Here's with a dynamic image size and wrapping element.
h1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: block;
margin: 0;
}
.wrap {
position: relative;
float: left;
}
<div class="wrap">
<h1>Loreum!</h1>
<img src="https://picsum.photos/300/200" alt="Loreum Pics">
</div>
I hope this will work. This can place the h1 tag in 100% width and text inside that will be center aligned.
h1{
position:fixed;
top: 20%;
width:100%;
text align: center;
}
Since you used position:fixed for the image, it is better to use fixed position for <h1> also.This will help to stick the <h1> always with image.
why not just put both the img and the h1 tag in an enclosing div, and then do the absolute positioning on that div - this will be more maintainable because you won't have to be setting position: absolute on multiple elements
I am trying to vertically center an image. I know how to do it with absolute position, but the problem with this is that other elements around it collapse into it.
This is how I vertically center using absolute position:
.element {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
I'd like to use relative position, but when I change absolute to relative, it does not work. Anyone have any suggestions to vertically center using relative position? I could do padding/margin top until its centered but I would like the css to generate it centered in case the image changes height when responsive.
This is the HTML and CSS, its pretty simple:
<div class="header-main-left">
<img src="/images/header_logo.png" >
</div>
.header-main-left {
float: left;
height: 95px;
position: relative;
}
.header-main-left img {
position: absolute; //I want this to be position relative
top: 50%;
transform: translateY(-50%);
}
position:relative does not take an element out of the flow, it just allows you to change its render location relative to where it would've been rendered had it not been positioned.
position:absolute takes an element out of the document flow. This causes the elements origin to be the upper left of the nearest ancestor element that is not position:static.
If you need to set your particular element to position:relative, but need its initial position to be centered in its parent, add a wrapper element and move the centering to that wrapper.
.header-main-left {
float: left;
height: 95px;
position: relative;
}
.header-main-left .logo-wrapper {
position:absolute;
top:50%;
height:100%; /* let the relative top and transform on the img work */
}
.header-main-left img {
position: relative; /* I want this to be position relative */
top:50%;
transform: translateY(-50%);
}
<div class="header-main-left">
<div class="logo-wrapper">
<img src="/images/header_logo.png" >
</div>
</div>
Try to use the
display: table-cell;
Than the vertical align set to center
Or use tables.
Or use Jquery that add margin-top on the element equally to the half of its height
I'm trying to align vertically a div inside a container with a height defined. I'm following the guide of http://www.vertical-align.com/, but I'm facing some issues.
According to the website, if I use this css with for this code:
#containingBlock {
height: 200px;
position: relative;
overflow: hidden;
border: 1px solid red;
}
#containingBlock > div {
position: absolute;
top: 50%;
border: 1px solid green;
}
#containingBlock > div > div {
position: relative;
top: -50%;
border: 1px solid orange;
}
<div id="containingBlock">
<div>
<div>
This should be placed in the middle
</div>
</div>
</div>
Fiddle available here
I should obtain a text perfectly in the middle. But this doesn't happen because the top: -50% doesn't work. According to Mozilla dev the top property + % value should be based on the parent's height, which has the same height of its child automatically in this case. But the "automatic wrap height" does not seem to be take into consideration. If I specify a explicit height for the parent div (I mean, the first one nested), everything seems to be ok, but I would like it to take the height of its child automatically! What's wrong with this?
If the height of the block to be positioned is known you can affect the correct positioning with negative margin (i.e 50% of the known height).
If it is not known you can affect it with a CSS transform as follows
-webkit-transform:translate(0%, -50%);
This moves the object vertically half it's own height...and so on
HTML
<div class="containingBlock one">
<div>
This should be placed in the middle
</div>
</div>
CSS
.containingBlock {
height: 200px;
position: relative;
border: 1px solid red;
}
.containingBlock > div {
position: absolute;
top: 50%;
border: 1px solid green;
-webkit-transform:translate(0%, -50%);
}
JSfiddle
here's a fiddle: http://jsfiddle.net/dC22r/4/
you have to set an height to the div that has to be centered then give it top:50% and subtract half his height with a negative margin.
I saw that there were some posts on the subject but none of them answers my question specifically
http://jsfiddle.net/27van/ shows how to center text horizontally.
I want to center it vertically in the parent div, without using the top which sets a fixed number of pixels (while I need it to be dynamic)
Any clues?
.parent_div {
position: relative;
text-align: center;
}
.child_div {
position: absolute;
width: 100%;
top: 70px;
}
<div class="parent_div">
<img src=...></img>
<div class="child_div">
<h1>Some Title</h1>
</div>
</div>
Because you have given the child element a width of 100% so i am guessing you are looking to center align it vertically ... in that case you need to know the height of your .child-div if it has a fixed height then you can use something like this:
.parent_div {
position: relative;
}
.child-div {
position: absolute;
height: 100px; /* for example */
top: 50%;
margin-top: -50px /* height divided by 2 */
}
and if the height is unknown then you can use the same method but calculate height & margin via jQuery. And just in case you wanted to align it horizontally you can use the same method but with these changes ... in this case you need fixed width.
.child-div {
position: absolute;
width: 100px; /* for example */
left: 50%;
margin-left: -50px /* width divided by 2 */
}
Your updated fiddle
I have the following HTML:
<div class="outer">
<div class="inner rotate">Centered?</div>
</div>
div.outer is a narrow vertical strip. div.inner is rotated 90 degrees. I would like the text "Centered?" to appear centered in its container div. I do not know the size of either div in advance.
This comes close: http://jsfiddle.net/CCMyf/2/. You can see from the jsfiddle that the text is vertically centered before the transform: rotate(-90deg) style is applied, but is somewhat offset after. This is particularly noticeable when div.outer is short.
Is it possible to center this text vertically without knowing any of the sizes in advance? I haven't found any values of transform-origin that solve this problem.
The key is to set position top and left to 50% and then transformX and transformY to -50%.
.inner {
position: absolute;
top: 50%;
left: 50%;
}
.rotate {
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
see: http://jsfiddle.net/CCMyf/79/
It may be a bit late for answering that question, but I stumbled on the same issue and found some way of achieving it, by adding another div in the way.
<div class="outer">
<div class='middle'><span class="inner rotate">Centered?</span></div>
</div>
and applying a text-align: center on that middle element, along with some positioning stuff:
.middle {
margin-left: -200px;
width: 400px;
text-align: center;
position: relative;
left: 7px;
top: 50%;
line-height: 37px;
}
The .inner also gets a display: inline-block; to enable both rotate and text-align properties.
Here is the corresponding fiddle : http://jsfiddle.net/CCMyf/47/
The another option to rotate text 90 degree and center on axis Y is:
.rotate-centered {
top: 50%;
right: 50%;
position: absolute;
transform: scale(-1) translate(-50%, 50%);
writing-mode: vertical-lr;
}
<span class="rotate-centered">Text<span>
Example: https://codepen.io/wwwebman/pen/KKwqErL
But because of bad support in IE/EDGE writing-mode does NOT work there:
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
Can you add margin: 0 auto; to your "rotate" class to center the text.
.rotate {
-webkit-transform: rotate(-90deg);
-ff-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 16px; /* transform: rotate() does not rotate the bounding box. */
margin: 0 auto;
}
The answer from 'bjnsn' is good but not perfect as it fails when the text contains space in it. For example he used 'Centered?' as text but if we changed the text to let suppose 'Centered? or not' then it will not work fine and will take the next line after space. Ther is not width or height defined for the inner div block.
.inner {
font-size: 13px;
font-color: #878787;
position: absolute;
top: 50%;
left: 50%;
background: #DDD;
}
https://jsfiddle.net/touqeer_shakeel/f1gfy1yy/
But we can make the whole text centered align properly, by setting the inner div width equal to height of the outer div, line-height of inner div equal to the width of the outer div and setting the display flex property for inner div with align-items:center and justify-content:center properties.
.inner {
font-size: 13px;
font-color: #878787;
position: absolute;
top: 50%;
left: 50%;
display: flex;
justify-content:center;
align-items:center;
line-height:40px;
}
$('#height').on('change', function(e) {
$('.outer').css('height', $('#height').val() + 'px');
$('.inner').css('width', $('#height').val() + 'px');
});
updated fiddle https://jsfiddle.net/touqeer_shakeel/cjL21of5/
Removing : margin-top: -7px; from .inner made the vertically rotated text centered for me. It also made the horizontal text not centered.
Just remove the above code?
You could add this:
$('.inner').css('margin-top', $(this).parent().height() - 2*$(this).height());
To your .on('change') function, as you can see here: http://jsfiddle.net/darkajax/hVhbp/