I've got the following HTML markup:
<div class="custom-alert-window" id="alert-window">
<span id="alert-window-text">Hi!</span>
</div>
And this is my CSS:
div.custom-alert-window{
z-index: 100;
width: 30%;
border: 1px solid grey;
border-radius: 7px;
background-color: #FFF;
height: 5%;
position: absolute;
bottom: -156px;
margin-left: 37.5%;
text-align: center;
padding: 5px;
}
div.custom-alert-window > span{
margin: 0px;
padding: 0px;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
But for some reason, the <span> is not vertically centered. It does position itself 50% from the top, but the transform: translateY(-50%); function doesn't work for some reason.
The element needs to be vertically centered in relation to its parent, if you want the element to be vertically centered in the entire page, make sure it is not wrapped in a container which has non-static positioning. Otherwise, the element will be vertically centered relative to its parent height.
JSFiddle
div.custom-alert-window {
width: 30%;
height: 10%;
border: 1px solid grey;
border-radius: 7px;
background-color: #FFF;
text-align: center;
padding: 5px;
/* vertical centering */
position: absolute;
z-index: 100;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
/* horizental centering */
margin:0 auto;
left: 0;
right: 0;
}
div.custom-alert-window span {
/* vertical centering */
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
<div class="custom-alert-window" id="alert-window">
<span id="alert-window-text">Hi!</span>
</div>
For some reason, it worked when I changed the position of the span to absolute.
div.custom-alert-window > span{
position: absolute;
}
Related
I have absolute positioned text inside a relative text wrap and I want it to vertically and horizontally center. The issue is, the text won't center because it's width and height automatically fill the container. How do I fix this so the text can be centered in the div, both vertically and horizontally?
JSFiddle
HTML
<div class="text-wrap">
<h3>Hello</h3>
</div>
CSS
.text-wrap {
height: 200px;
width: 120px;
position: relative;
border: 1px solid black;
}
.text-wrap h3 {
position: absolute;
margin: auto;
left:0;
right:0;
top:0;
bottom: 0;
}
Change the CSS rule for the absolute element as follows to center it (moves its upper left corner to the center of the container, then moves it back up and left by half of its own width/height, thereby centering it)
.text-wrap {
height: 200px;
width: 120px;
position: relative;
border: 1px solid black;
}
.text-wrap h3 {
position: absolute;
margin: 0;
padding: 0;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="text-wrap">
<h3>Hello</h3>
</div>
Try this
.text-wrap {
height: 200px;
width: 120px;
position: relative;
border: 1px solid black;
}
.text-wrap h3 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
I have some text which could be different on different pages. I need to make it align vertically middle. There is some problem because of less width for text.
.vertical-text-block {
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
float: left;
background-color: grey;
}
.vertical-text {
display: block;
position: relative;
top: 50%;
white-space: nowrap;
font-size: 10px;
text-transform: uppercase;
transform: translateY(-50%);
transform: rotate(-90deg);
}
<div class="vertical-text-block">
<span class="vertical-text">ASHWANI SHARMA</span>
</div>
It should look like the image attached below:
I added right: 50%, transform-origin: right and removed transform: translateY()
.vertical-text-block {
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
float: left;
background-color: grey;
background-image: linear-gradient(darkgrey 0%, darkgrey 50%, lightgrey 50%);
background-repeat: no-repeat;
}
.vertical-text {
display: block;
position: relative;
top: 50%;
right: 50%; /* 1 */
white-space: nowrap;
font-size: 10px;
text-transform: uppercase;
/*transform: translateY(-50%);*/ /* 2 */
transform: rotate(-90deg);
transform-origin: right; /* 3 */
}
<div class="vertical-text-block">
<span class="vertical-text">ASHWANI SHARMA</span>
</div>
i made a small change to the DOM and was able to achieve it,i.e centering the text , irrespective of its length .
Made a small change to the DOM .
<div class="vertical-text-wrap">
<div class="vertical-text-block">
</div>
<span class="vertical-text">American Leadership Index</span>
</div>
Added an extra wrapper , hope it is allowed.
.vertical-text-wrap {
position: absolute;
height: 100%;
margin: 0px 20px;
}
.vertical-text-block {
width: 40px;
height: 100%;
position: absolute;
top: 0;
left: 0;
float: left;
background-color: grey;
}
.vertical-text {
display: inline-block;
position: relative;
top: 50%;
left: -35%;
font-size: 10px;
text-transform: uppercase;
transform-origin: 50% 50%;
transform: translateY(50%) rotate(-90deg);
}
<div class="vertical-text-wrap">
<div class="vertical-text-block">
</div>
<span class="vertical-text">American Leadership Index</span>
</div>
Catch here is , when text becomes shorter , the left position of span.vertical-text has to be adjusted.
But hey , it is vertically centered :)
I think you can also do it this way http://codepen.io/Danstan/pen/QGWggO
Just add the translateX and translateY correctly on .vertical-text everything will be at the center
.vertical-text {
font-size:8px;
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
-webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
transform: translateX(-50%) translateY(-50%) rotate(90deg); white-space: nowrap;font-size: 10px;}
I am trying to set a FontAwesome icon as a "defualt thumbnail" for a list of articles. My problem is that the icon is appearing off center horizontally in my div. See the jsFiddle.
<div class="card-row-image fa fa-cutlery thumbnail-default">
<div class="card-row-label">Restaurants
</div>
<div class="card-row-price">Pennsylvania</div>
</div>
.thumbnail-default {
position: relative;
text-align: center;
border: 1px solid #547b97;
background: #e4e4e4;
}
.thumbnail-default:before {
position:absolute;
font-family: 'FontAwesome';
font-size: 72px;
color: #547b97;
text-align: center;
padding: 0px;
margin: 0px;
top: 50%;
transform: translateY(-50%);
}
.card-row-price {
background-color: #009f8b;
bottom: 0px;
color: #fff;
font-size: 13px;
left: 50%;
padding: 3px 15px;
position: absolute;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
white-space: nowrap;
z-index: 2;
}
.card-row-label {
background-color: #c6af5c;
color: #fff;
left: 50%;
font-size: 13px;
padding: 3px 15px;
position: absolute;
top: 0px;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
z-index: 2;
}
.card-row-image {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 200px;
position: relative;
width: 262px; }
Here is my current output:
Any ideas? Thanks for your time!
set these css codes to make it centered. This happens because on absolute positioned pseudo elements, if you do not specify where to be horizontally (you did not set left or right property), it will follow the text flow and would obey the text-align: center set on the parent.
.thumbnail-default:before { left: 50%; transform: translate(-50%, -50%); }
Working Fiddle
I want to overlap two divs and then center them vertically and horizontally.
I am able to overlap the divs and center them vertically, BUT horizontal centering is not working.
In the css code, I have a class that I copied from some website and it functions to center any div (hope so!).
Here is the fiddle to it:
http://jsfiddle.net/o3c8768h/1/
HTML:
<div id="micWidgetContainer">
<div id="micWidgetCircle" class="centerme"></div>
<div id="micWidget" class="centerme">
</div>
</div>
CSS:
#micWidgetContainer {
width: auto;
height: 500px;
position: relative;
margin: 0 auto;
}
.centerme {
margin: 0 auto;
display: table;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#micWidgetCircle {
width: 200px;
height: 200px;
position: absolute;
display: block;
margin: 0 auto;
border-radius: 50%;
background: #D0CBCB;
}
#micWidget {
display: block;
width: 200px;
height: 100px;
position: absolute;
border-radius: 40%;
background: #EEE;
z-index: 10;
}
if you want to center vertically and horizontally a block you have to use the position:absolute property and the left, top, bottom and right statements.
i rewrited your .centerme class in order to make it works
.centerme {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
http://jsfiddle.net/o3c8768h/9/
I have a relatively div positioned on top of a fixed position div and I would like to vertically align this first div. Is there a way to do this? This is my current markup:
<div class="overlay">
<div id="dialogInvoice">
content
</div>
</div>
The CSS:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
width: 390px;
height: 722px;
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: relative;
}
Any suggestions on this? I did try the line-height method but this is apparently only working when using mere text.
If your element does not have a fixed width or height then you can't use the other solutions without using javascript to calculate the values.
Here is an alternative.
#dialogInvoice {
width: 390px;
height: 722px;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
what you need to add to your css of #dialogInvoice is
top: 50%;
and change the margin to
margin: 361px auto;
(361 is 722 / 2)
it will first push your container half way down the page and then push it back up the required value, which is exactly half of its height (361px)
here is a jsfiddle for better understanding.
This CSS may do what you require:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
top: 100px;
bottom:100px;
left:100px;
right:100px;
}