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
Related
I'm trying to place Text and button on an image like this. Can someone help with this.
this is what I have tried. The thing is it does render properly in outlook email
CSS:
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: auto;
}
.container .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #55A646;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: #55A646 ;
}
HTML:
<div class="container">
<img src="http://image.com" alt="" style="width:100%">
<button class="btn">Button</button>
</div>
Folow The link: https://www.w3schools.com/howto/howto_css_image_text.asp
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom center text */
.bottom-center {
position: absolute;
bottom: 8px;
left: 45%;
}
/* Centered text */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://cdn.searchenginejournal.com/wp-content/uploads/2019/07/the-essential-guide-to-using-images-legally-online-760x400.png" alt="Snow" style="width:100%;">
<div class="bottom-center">
<button>Bottom Center</button>
</div>
<div class="centered">Centered</div>
</div>
try this instead,
.container {
position: relative;
width: 100%;
max-width: 400px;
}
.container img {
width: 100%;
height: 100%
}
.container .btn {
position: absolute;
bottom: 10px;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #55A646;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.container .btn:hover {
background-color: #00cc00 ;
}
h4{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #fff;
background:#111;
padding: 7px;
}
<div class="container">
<img src="https://i.stack.imgur.com/bf3jO.png" alt="" style="width:100%">
<h4>The table Fan</h4>
<button class="btn">Fan</button>
</div>
I want my modal to disable all clicks on the background, it currently allows me to click the background when there is a button or link. How do I disable that because I thought the pointer:none was supposed to disable that?
Any help would be appreciated.
This is my CSS code and HTML code:
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity:1.0;
pointer-events: none;
}
.ng-modal-dialog {
/* A centered div above the overlay with a box shadow. */
z-index: 10000;
position: fixed;
width: 50%; /* Default */
/* Center the dialog */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 4px 4px 80px #000;
pointer-events: auto;
}
.ng-modal-dialog-content {
padding: 10px;
text-align: left;
}
.ng-modal-dialog-footer {
margin-top:40px;
text-align:right;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 150%;
color:red;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}
<modal-dialog show="TeamManagementModal" class="ng-modal-overlay" data-backdrop="false">
<div class="modal-inner">
<div class=".ng-modal-dialog-content">
<p ng-bind-html="msg"></p>
<p ng-bind-html="ErrorMsg"></p>
</div>
<div class="ng-modal-dialog-footer">
<button style="width:160px;" class="btn solid-green-btn" ng-show="nowAdminOk" ng-click="Great()">Great</button>
</div>
</div>
</modal-dialog>
I have a footer div with this code
.footer {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
background-color: #DDD;
}
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;
}
.footer-text a {
text-decoration: none;
}
<nav class="footer">
<div class="center-xy footer-text">
Made with <span style="color: red; font-size: 1.5em;">♥</span> by <strong>Shantanu Banerjee</strong>
</div>
</nav>
The problem is the footer-text is well centered in Laptop Screens and mobile phones. But on Mobile Phones the text comes in 2-lines.
What is the solution?
I am not sure about the code(at the time of posting the comment), but it looks like there's a lot of padding because even with adequate visible space, the text is wrapping. So..
Reduce padding around the text. OR
Apply white-space: nowrap; for your text.
Just add the following css
.footer-text {
min-width: 200px;
text-align: center;
}
And it will be fixed.
Here's a working demo:
.footer {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
background-color: #DDD;
}
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;
}
.footer-text a {
text-decoration: none;
}
.footer-text {
min-width: 200px;
text-align: center;
}
<nav class="footer">
<div class="center-xy footer-text">
Made with <span style="color: red; font-size: 1.5em;">♥</span> by <strong>Shantanu Banerjee</strong>
</div>
</nav>
try this:
.footer {
position: absolute;
bottom: 0;
margin:0;
background-color: #DDD;
left:0;
right:0;
padding:15px 0;
text-align:center
}
.center-xy {
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;
}
.footer-text a {
text-decoration: none;
}
<nav class="footer">
<div class="center-xy footer-text">
Made with <span style="color: red; font-size: 1.5em;">♥</span> by <strong>Shantanu Banerjee</strong>
</div>
</nav>
just use
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-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'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;
}