Can someone help me to center my text using javascript or in css?
I'm using bootstrap on this.
This is my html code
<header id="home">
<div class="container">
<div class="row banner" style="margin-top: 0px;">
<div class="banner-text">
<h1 class="responsive-headline wow zoomIn animated" style="font-size: 72px; visibility: visible; animation-name: zoomIn;">I'm <span>Alyssa Reyes</span></h1>
<h3 class="wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">I'm a passionate <span>Web Designer</span> and <span>Developer</span> creating modern and responsive design for <span>Web</span> and <span>Mobile</span>. <br> Let's start and learn more about me.</h3>
<hr>
</div>
</div>
</div>
</header>
Thanks
You can use text-align property
<h1>Alyssa Reyes</h1>
css
h1{
text-align:center;
}
Demo of your page
if you want to center vertically, you can use
.banner-text {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%) }
demo
Related
I have a web page that emulates a wizard. After the user leaves the second step to go to the third step, I'm "flipping" the panel like a card. You can see it in action in this Bootply. The code looks like this:
<div class="container-fluid" style="background-color:#eee;">
<div class="container">
<div class="flip-container" style="width:200px;">
<div class="flipper">
<div class="front">
<div class="step-2-default" id="step2" style="overflow-x:hidden; padding:0.0rem 1.0rem;">
<label>Step 2</label>
<p>These are the details of the second step</p>
<button id="nextButton2">next</button>
</div>
<div class="step-1-default" id="step1">
<label>Step 1</label>
<p>These are the details of the first step</p>
<button id="nextButton1">next</button>
</div>
</div>
<div class="back">
<div id="step3">
<label>Step 3</label>
<p>Thank you for using this wizard</p>
</div>
</div>
</div>
</div>
</div>
</div>
If you load the Bootply, you'll notice that the step is visible from steps 1 and 2. From my understanding, the issue is the height:auto property. I'm using this because the size of the content for each of the steps in my wizard is dynamic.
It works fine in Chrome. But, I can't figure out how to make it work in iOS / Safari. Any help is appreciated.
You're missing a webkit-specific backface-visibility:
.front, .back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
http://www.bootply.com/RiX9HF5t21
That works for me in Safari (tested), just change the background-color:transparent; to background-color: #fff; for classes .step-1-default, .step-2-default and add:
.flip-container.flip .front {
display: none;
}
To prevent the other side from being visible in Safari & iOS, set the background color on the front and back classes:
.front, .back {
width: 100%;
height: auto;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background-color: #FFF;
}
I need to align image to div (.md4 - boostrap) horizontal and vertical...
I try do this like:
<div class="front" style="height: 820px; width: 820px; vertical-align: middle;" >
<div class="inner" style="float:none; margin:0 auto;">
<img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg"/>
</div>
</div>
But it doesn't work. Its still align only in one way.
jsfiddle https://jsfiddle.net/tzvze7ew/
What i do wrong ? And how should its look for work?
You can use the CSS property transform to center both vertically and horizontally.
body {
margin: 0;
}
div:first-of-type {
background-color: blue;
height: 100vh;
}
img {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="col-md-4">
<div class="main">
<div class="submain">
<div class="front">
<div class="inner">
<img src="http://placehold.it/100x100" />
</div>
</div>
<div class="back">
</div>
</div>
</div>
</div>
The above solution won't support all the browsers. Because transform is CSS3 property.
We can achieve through javascript. What we can do is lets calculate the height of the browser and divide by 2 and minus 50% height of the image.
Below is code
.img {
margin: 0 auto;
}
Javascript
Lets say your image height is 150px.
<script>
$(document).ready(function(){
var height = window.innerHeight;
var new_height = (height/2) - 75; // Half of 150 of 75.
$('.img').css('margin-top', new_height+'px');
});
</script>
TL& DR: I am trying to make sure my left and right icons align with the center text which i have successfully been able to place directly in the CENTER of the screen.
As you can see below: If i put in a couple words or a small snippet block the left and right arrows do not look centered with the centered div.
Here are the thing I have tried unsuccessfully:
1) Tried to problematically do a count of the text and have it write a new style sheet each time. That just stinks and doesn't sound right? It didn't work anyway at least on ruby on rails. Level 10 stupid idea 5 hours wasted
2) I could require all TEXT in the WELL to be of a certain length but then that would put specific requirements coupled with the view Level 2 Stupid idea
3) Searched everywhere. As you can see, I was able to get the things centered on the screen, now its the small nuisances that are specific that a general tutorial or website can not teach.
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<div class="pull-left centered_left">
<h1><span class="glyphicon glyphicon-menu-left "> </span> </h1>
</div>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<div class="centered well">
<h1 class="crop"> My ICONS do not align with this text!</h1>
</div>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 ">
<div class="pull-right centered_right ">
<h1> <span class="glyphicon glyphicon-menu-right "> </span> </h1>
</div>
</div>
</div>
</div>
mysyle.css
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
.centered_left {
position: fixed;
top: 49%;
left: 0%;
}
.centered_right {
position: fixed;
top:49%;
right: 0%;
}
h1.crop{
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
}
#media(max-width: 480px) {
h1 {
font-size: 12pt;
}
}
try changing your .centered_left, and .centered_right rules to this:
.centered_left {
position: fixed;
top: 50%;
left: 1%;
transform: translate(-50%, -50%);
}
.centered_right {
position: fixed;
top:50%;
right: -1%;
transform: translate(-50%, -50%);
}
I'm using Zurb Foundation. When the cursor hovers over one of the DIVs in the grid, an info DIV should appear over the top, making the background image darker so that the user can more easily see the text.
Foundation has a default padding for columns. So position:absolute; width:100% on the info div background makes it bigger than the Item Div.
Code:
<div class="row">
<div class="large-4 columns">
<div style="position:absolute; width:100%; height:100%;...">Tommy...</div>
<img src=".." style="width:100%; height:100%">
</div>
</div>
This is how it should look like:
This is what it looks like now:
You could add a wrapper <div> inside the column to contain the <img> and the absolutely positioned <div>. So that the overlay would respect to the content-box of the column rather than the padding-box.
.overlay-container { position: relative; display: inline-block; }
.overlay {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
padding: 1rem;
background-color: rgba(0, 0, 0, 0.4);
color: white;
font-size: 1.2rem;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.overlay-container:hover .overlay {
visibility: visible;
opacity: 1;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet" type="text/css" />
<div class="row">
<div class="large-4 columns">
<div class="overlay-container">
<img src="http://lorempixel.com/400/200" />
<div class="overlay">Overlay text</div>
</div>
</div>
</div>
So I have missed one simple thing - putting one more div into columns solves this problem, because new div can be without padding, so it's 100% width, as for parent div, will be ok for info div also. This is the code:
<div class="row">
<div class="large-4 columns">
<div>
<div style="position:absolute; width:100%; height:100%;...">Tommy...</div>
<img src=".." style="width:100%; height:100%">
</div>
</div>
</div>
I can't seem to figure this out.
I want to have a system whereby an image will change to another image upon hover over.
In my html I have:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png"></p>
</div>
And then in my css:
.linkyimage{
position: relative;
height: 250px;
width:250px:
}
.hovvery{
position: absolute;
height: 250px;
width:250px:
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery {
visibility: visible;
opacity:1;
}
Yet nothing seems to happen for me. Where am I going wrong?
edit:
Still can't seem to get any effect.....
.linkyimage{
position: relative;
height: 250px;
width:250px;
}
.hovvery{
position: absolute;
height: 250px;
width:250px;
visibility: hidden;
opacity: 0;
}
.linkyimage:hover .hovvery{
visibility: visible;
opacity:1;
}
and html:
<div id="content">
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
<img src="image/yellow.png">
<img src="image/lblue.png">
<img src="image/green.png">
<img src="image/brown.png">
<div class"linkyimage">
<img src="image/dblue.png" alt"blue" />
<p class="hovvery"<img src="image/black.png" /></p>
</div>
</div>
I'm going for sort of a gallery of images, which on mouse over change to the black image- in the futuer I will make it so a description of the image appears over it but for now trying to get the basics going!
Working FIDDLE Demo
You didn't close p in this line:
<p class="hovvery"<img src="image/black.png"></p>
Correct code:
<div class="linkyimage">
<img src="image/red.png" alt="red" />
<p class="hovvery"><img src="image/black.png" /></p>
</div>
Also you have syntax error in your CSS here:
width:250px: /* it must be semicolon ; at the end */
Change it to this:
width: 250px;